jQuery Clone tr Datepicker not writing date to new row

Question

I have a table with an add button at the end. When the Add button is clicked the tr is cloned. I was having a problem getting the datepicker to work on the newly created row but got the function to appear except now it writes the date to the first row. I also need the newly created row to be blank and that is not working either.

Here is the fiddle, http://jsfiddle.net/clintongreen/ctx3H/

Thanks

UPDATE jsfiddle.net/clintongreen/ctx3H/2

This fiddle works IF you put in a date in Start Date & End Date before you click Add then it works hundreds, except it adds the new row on top of the current row. I want it underneath the current row. Thanks

Answer 1

Try this: http://jsfiddle.net/ctx3H/3/

// Date Picker
$(".datepicker").datepicker();
// Clone Function
$("input.tr_clone_add").live('click', function() {
    $(".datepicker").datepicker("destroy");
    $(".datepicker").removeClass("hasDatepicker").removeAttr('id');
    $(this).closest('.tr_clone').after($(this).closest('.tr_clone').clone());
    $('.tr_clone:last').find(':text').val('');
    $(".datepicker").datepicker();
});

You cloned the unique id that datepicker attaches to matched elements which messed with the functionality.