Flatpickr doesn't show after html code is rendered

I am using Flatpicker to show a datetime picker, and the following code works fine, if i click on the input field, the calender opens and the user is able to pick a datetime.

<input id="datetime" class="form-control datetime" type="text" name="test">

Now I have a button, that creates html with javascript and adds a new input on the screen. The input field is shown as expected, but clicking it does not open a Flatpickr calender.

$('#addplanning').click(function() {
  let template =
    `<tr data-index="">
       <td>
         <input id="datetime" class="form-control datetime" type="text" name="planning[` + i + `][start_date]" value="{{$start_time->toDateTimeLocalString()}}" required>
       </td>
     </tr>`;
        
   i++;
   $('#planning-body').append(template);
});

The standard html 'datetime-local' function seems to work, but using Flatpicker or jqueryui doesn't show the calenders.

Does anyone have an idea how I could make this work?