Estoy usando Flatpicker para mostrar un selector de fecha y hora, y el siguiente código funciona bien, si hago clic en el campo de entrada, se abre el calendario y el usuario puede elegir una fecha y hora.

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

Ahora tengo un botón que crea html con javascript y agrega una nueva entrada en la pantalla. El campo de entrada se muestra como se esperaba, pero al hacer clic en él no se abre un calendario Flatpickr.

 $('#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); });

La función estándar html 'datetime-local' parece funcionar, pero usar Flatpicker o jqueryui no muestra los calendarios.

¿Alguien tiene una idea de cómo podría hacer que esto funcione?