datepicker field not working on jquery clone

datepicker field not working on jquery clone

I am working on jquery datepicker Where when the user click add new more button With the help of clone my entire div was duplicating so when i click date field I am not getting the datepicker in the duplicate row.I have search in stack overflow some of the link which i tired for example remove hassclass in datepicker but still not working kindly guide me.

Here is my jquery code

var i=1; $(document).on("click", ".edu_add_button", function () { var i=$('.cloned-row1').length; $(".cloned-row1:last").clone().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").find('input[type="text"]').addClass("hasDatepicker"); if(i < $('.cloned-row1').length){ $(this).closest(".edu_add_button").removeClass('btn_more edu_add_button').addClass('btn_less btn_less1'); } i++; return false; }); $(document).on('change', '.txt_schName', function (){ var cur = $('.txt_schName').index($(this)); $('.school_Name').eq(cur).val($(this).val()) }); $(".hasDatepicker").datepicker({ dateFormat: "m-dd-yy", changeMonth: true, changeYear: true, showButtonPanel: true, beforeShow: function () { setTimeout(function (){ $('.ui-datepicker').css('z-index', 99999999999999); }, 0); }, }).on('change', function() { $('.hasDatepicker').valid(); // triggers the validation test on change });

Here is the http://jsfiddle.net/karthic2914/gs1pnrce/


Kindly help me.

Thanks & Regards Mahadevan