datepicker on dynamically created row with inputs

Question

I have a form which has the possibility to dynamically create new row with inputs, the date input on each new row should have a datepicker. I have this almost working, but when

Answer 1

In my case, I use clone() to create a copy of datepicker.

$(".cloneDiv").clone().appendTo("#copyHolder");

Then I remove the "class" and "id" that datepicker has added to input elements.

$(".hasDatepicker").removeClass("hasDatepicker").removeAttr("id");

NOTE: Since the input elements are to be cloned, I don't give them the "id" attribute. So datepicker automatically adds "id" to my DOM element. In addition, if the element to be cloned has user assigned "id" which means there will be at least two elements sharing the same "id", datepicker will have some problem to find the correct one. An example can be found in @j08691 's answer.

Finally, re-bind datepicker to input elements:

$(".inputDate").datepicker();

All the input elements with class "inputDate" will have datepicker.