Good morning friends I have the following problem with a datetimepicker in a dynamic form 
that increases, the problem is that the first row is displayed on the datetimepicker per if I give the button more to clone the row above the second datetimepicker not me unfold the calendar
Html Start date:
<div class="col-xs-5">
<label for="exampleInputEmail1">Fecha Fin:</label>
<div class='input-group date' id='datetimepicker2'>
<input type="text" name="fecha_final[]" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</td>
this is a function of datetimepicker
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
defaultDate: "<?php echo date('Y-m-d-hh') ?>",
$('#datetimepicker2').datetimepicker({
defaultDate: "<?php echo date('Y-m-d-hh') ?>",
});
});
</script>
and finally the javascript that increases the fields of the form
<script>
$(function(){
// Clona la fila oculta que tiene los campos base, y la agrega al final de la tabla
$("#adicional").on('click', function(){
$("#tabla tbody tr:eq(0)").clone().removeClass('fila-fija').appendTo("#tabla");
});
// Evento que selecciona la fila y la elimina
$(document).on("click",".eliminar",function(){
var parent = $(this).parents().get(0);
$(parent).remove();
});
});
</script>