Input time flatpickr not working in javascript appending

I have a table with a time input field using flatpickr. The time input is in a table format. The first 2 static time input fields are working. However, as I append the row with the time input field, the flatpickr does not work. can anyone guide me?

        $('.from').flatpickr({
            enableTime: true,
            noCalendar: true,
            time_24hr: true,
            minuteIncrement: 30
        });
        $('.to').flatpickr({
            enableTime: true,
            noCalendar: true,
            time_24hr: true,
            minuteIncrement: 30
        });

        $(document).on("click","#addmore",function() {
                var html = "<tr>" +
                "<td><input type='time' class='form-control flatpickr from' name='from[]' ></td>" +
                "<td><input type='time' class='form-control flatpickr to' name='to[]' ></td>" +
                "</tr>";
                // Append data
                $('tbody').append(html);
            });

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
</head>
<body>
<div class="container">
  <div class="row justify-content-center">
    <table>
    <tbody>
      <tr>
        <td><input type="time" class="form-control flatpickr from" name="from[]"></td>
        <td><input type="time" class="form-control flatpickr to" name="to[]"></td>
      </tr>
      <tr>
        <td><input type="time" class="form-control flatpickr from" name="from[]"></td>
        <td><input type="time" class="form-control flatpickr to" name="to[]"></td>
      </tr>
    </tbody>
    </table>
    <input type='button' class='btn btn-warning' value='&#43; Add more rows' id='addmore'>
  </div>
</div>
</body>
</html>

Solution

I managed to solve it. I simply need to call the flatpickr again after appending a new row in the table body.

    const conf = {
        enableTime: true,
        noCalendar: true,
        time_24hr: true,
        minuteIncrement: 30
        };
    flatpickr(".from", conf);
    flatpickr(".to", conf);
    
        $(document).on("click","#addmore",function() {
                var html = "<tr>" +
                "<td><input type='time' class='form-control flatpickr from' name='from[]' ></td>" +
                "<td><input type='time' class='form-control flatpickr to' name='to[]' ></td>" +
                "</tr>";
                // Append data
                $('tbody').append(html);
                
                //Call flatpickr again after adding a new row
                flatpickr(".from", conf);
                flatpickr(".to", conf);
            });

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
</head>
<body>
<div class="container">
  <div class="row justify-content-center">
    <table>
    <tbody>
      <tr>
        <td><input type="time" class="form-control flatpickr from" name="from[]"></td>
        <td><input type="time" class="form-control flatpickr to" name="to[]"></td>
      </tr>
      <tr>
        <td><input type="time" class="form-control flatpickr from" name="from[]"></td>
        <td><input type="time" class="form-control flatpickr to" name="to[]"></td>
      </tr>
    </tbody>
    </table>
    <input type='button' class='btn btn-warning' value='&#43; Add more rows' id='addmore'>
  </div>
</div>
</body>
</html>