reload datepicker dynamically

Question

ok i have a javascript object to control elements on my page such as load html, undo, redo etc.

When i do undo, it removes the datepickers from the inputs that should be datepickers.

My code is located here: http://jsfiddle.net/maniator/qAWuA/

i changed my code to inline JSON just for the fiddle

It has 6 columns, two of them being datepickers with start date and its expiration.

When a user clicks of undo or undo all -- the datepickers no longer work.

Can someone please help me out here?

Thanks :-D

UPDATED

still have the issue, but i changed the fiddle a bit

Answer 1

I solved the issue:

i added this line to both of the undo clicks:

self.refreshDatePickers();

on create row i added this to expiration:

case 'expiration':
     td.append($('<input>',
          {value: i, name: index+"["+topIndex+"]", 
               type: 'text', size: 30, id: 'to['+topIndex+']', 
               'class': 'dp', 'index': topIndex}));
     break;

and then i added the refreshDatePickers function:

refreshDatePickers: function(){
    var self = this;
    $.each($('.dp'),function(){
        var index = $(this).attr('index');
        var tr = $(this).parent().parent();
        $( "input[name='startDate["+index+"]'], input[name='expiration["+index+"]']", tr ).removeClass("hasDatepicker");
        self.createDatePicker(index, tr);
    })
}