activating datepicker on dynamically cloned fields

Question

I am cloning a set of fields, one of which is a datepicker field.

I have see this Use JQuery Datepicker on dynamically created fields and this jquery datepicker on cloned elements and this putting datepicker() on dynamically created elements - JQuery/JQueryUI but none seem to work for me.

HTML:

<div class="dedicationfields">
  <div class="form-group">
    <div class="col-md-12">
      <div class="col-md-6">
        <label class="datetag"> date: </label>
        <input placeholder="enter date" name="requestedDate"
           value="" size="30" class="required form-control datepicker  " 
           title=" " id="dp1529938300566" type="text">
      </div>
    </div>
  </div>
</div>
<div class="form-group" style="margin-top: 3px;">
  <input name="triggerAdd" id="triggerAdd" class="btn btn-success" value="ADD A NEW SET" type="button">
</div>

JS CODE:

$("#triggerAdd").click(function(){

    // clone fields:
   var dedicationfields = $(".dedicationfields:first").clone(true).insertAfter(".dedicationfields:last");

    //make sure new fields are empty: 
    $(".dedicationfields:last input[type=text], .dedicationfields:last select").val('');    

    $(".dedicationfields:last .datepicker" ).removeClass('hasDatepicker'); // added the removeClass part.

});

$(document).on('focus',".datepicker", function(){
    $(this).datepicker();
});   

Here is a DEMO: https://jsfiddle.net/kneidels/w12cx7qt/11/

Answer 1

You can try this code

    $("#triggerAdd").click(function(){

       var $last   = $('.dedicationfields:last');
       var $clone  = $last.clone(false);
       $last.after($clone);
       $(".dedicationfields:last input[type=text], .dedicationfields:last select").val('');
       $clone.find('input.datepicker')
            .removeClass('hasDatepicker')
            .removeData('datepicker')
            .attr('id', 'change_id' + Math.random())
            .unbind()
            .datepicker();
            });

     $(document).on('focus',".datepicker", function(){
    $(this).datepicker();
});

You can just customize the change_id ID attribute of your liking.

jsfiddle