jquery date picker in clone year and month not working and default date was not showing

jquery date picker in clone year and month not working and default date was not showing

Currently working on clone and datepicker using jquery. With my current code cloning was happening perfectly. In the clone div the datepicker was working but it was not working like original.

  1. When the user click add more button it was cloning entire div perfectly with the dates but if i select the date textfield from the cloned div year and month dropdown not displaying.

  2. When the user click add more button in the original Degree date it was showing the current date but in the clone it was not showing.

I have tried with all possibilites from my side I am not getting

I have tried added destroy for the datepicker still not working

Here is my jquery code

var i = 1; $(document).on("click", ".edu_add_button", function() { var i = $('.cloned-row1').length; $(".cloned-row1:last").clone(true).insertAfter(".cloned-row1:last").attr({ 'id': function(_, id) { return id + i }, 'name': function(_, name) { return name + i } }).end().find('[id]').val('').attr({ 'id': function(_, id) { return id + i } }); $(".cloned-row1:last").find(".school_Name").attr('disabled', true).val(''); $(".cloned-row1:last").find(".degree_Description").attr('disabled', true).val(''); $(".cloned-row1:last").find('.datepicker,.datepicker1').removeClass('hasDatepicker').datepicker(); i++; return false; }); $("#txt_Degdat").datepicker({ dateFormat: "mm-dd-yy", changeMonth: true, changeYear: true, yearRange: '1900:2100' }).on('change', function() { if ($('#txt_Degdat').valid()) { $('#txt_Degdat').removeClass('errRed'); } // triggers the validation test on change }).datepicker("setDate", "0"); $("#txt_Trsdat").datepicker({ dateFormat: "mm-dd-yy", changeMonth: true, changeYear: true, yearRange: '1900:2100' }).on('change', function() { if ($('#txt_Trsdat').valid()) { $('#txt_Trsdat').removeClass('errRed'); } // triggers the validation test on change }); $(document).on('click', ".btn_less1", function() { var len = $('.cloned-row1').length; if (len > 1) { $(this).closest(".btn_less1").parent().parent().parent().remove(); } });

Here is the weave Link

Any suggestion please what I am doing wrong here.


kindly please suggesst me a solution