How to put bootstrap datetimepicker as dynamic array

Question

How to put bootstrap datetimepicker as dynamic array?

The code as below:

The bootstrap form group which contain datetimepicker to put dynamically:

<div class="form-group fieldGroup">
  <div class="input-group">
<div class="form-row">
<div class="col-sm bg-devider5">  
    <div class="input-group col">
      <input name="task_date[]" id="task_date[]" type="text" class="form-control" placeholder="Implementation Date" readonly>
        <div class="input-group-addon btn" id="task_date_calendar_clear"><span class="glyphicon glyphicon-remove"></span></div>
        <div class="input-group-addon btn" id="task_date_calendar_view" ><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
        <span class="help-block" id="error"></span>                    
</div>
    <div class="col-sm-6 bg-devider5">
      <div class="custom-high" >
      <textarea name="notes[]" placeholder="Notes" style="min-width: 100%"></textarea>
      </div>
    </div>      
    <div class="col-sm-auto bg-devider5" >
    <div class="custom-high">
            <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
        </div>
    </div>
</div>
</div>
</div>

Below is Copy content for addmore and remove button when click event:

<div class="form-group fieldGroupCopy" style="display: none;">
  <div class="input-group">
<div class="form-row">
<div class="col-sm bg-devider5">
<div style="height:20px;">&nbsp;</div>
    <div class="input-group col">
      <input name="task_date[]" id="task_date[]" type="text" class="form-control" placeholder="Implementation Date" readonly>
        <div class="input-group-addon btn" id="task_date_calendar_clear"><span class="glyphicon glyphicon-remove"></span></div>
        <div class="input-group-addon btn" id="task_date_calendar_view" ><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
        <span class="help-block" id="error"></span>                    
</div>
    <div class="col-sm-6 bg-devider5">
      <div class="custom-high" >
      <textarea name="notes[]" placeholder="Notes" style="min-width: 100%"></textarea>
      </div>
    </div>      
    <div class="col-sm-auto bg-devider5" >
    <div class="custom-high">
            <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
        </div>
    </div>
</div>
</div>
</div>

bootstrap datetimepicker as dynamically array at textbox using jQuery not working :

$(document).ready(function(){
var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var time = today.getHours() + ":" + today.getMinutes();
    var dateTime = date+' '+time;

 $('#task_date').datetimepicker({
        language:  'ms',
        format: 'dd/mm/yyyy',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        minDate: 1,
        startDate: date,
        forceParse: 0
     });

//Also button to clear calendar and view calendar for new dynamic array not functional

    $("#task_date_calendar_clear").click(function(){
        $("#task_date").val('');
    });

    $("#task_date_calendar_view").click(function(){
        $('#task_date ').data("datetimepicker").show();
    });


    var maxGroup = 10;          
        //add more fields group dynamically
        $(".addMore").click(function(){

                if($('body').find('.fieldGroup').length < maxGroup){
                        var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';

                        $('body').find('.fieldGroup:last').after(fieldHTML);
                    }else{
                        alert('Maximum '+maxGroup+' groups are allowed.');
                }
            });

        //remove fields group
        $("body").on("click",".remove",function(){ 
            $(this).parents(".fieldGroup").remove();
        });
      });

Answer 1

bootstrap datetimepicker as dynamically array at textbox using jQuery not working:

1. Datetimepicker was work successfully once I add a class .datetimepicker to

    input name="task_date[]" id="task_date[]" type="text" class="form-control " placeholder="Implementation Date" readonly    

2. I was change $('#task_date').datetimepicker({ to

    $('body').on('focus', ".datetimepicker", function() {
    $(this).datetimepicker({ ... }); });

3. Validate post array via php / ajax before save into db.