datepicker on dynamically created row with inputs

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 a new row with inputs is created, the datepicker won't work anymore on the date fields that are already existing. I have played the whole day to find out what i`m doing wrong, but i just can't see how to fix this. Here's fiddle -> http://jsfiddle.net/HermesTrismegistus/vdFaH My form looks like this: ``` <table id="productTable" class="table table-striped table-condensed"> <thead> <tr> <th>Product</th> <th>Datum</th> <th>Tijd</th> <th>Minuten</th> </tr> </thead> <tbody> <tr> <td><input id="products" class="input-medium" name="products[]" type="text" /></td> <td><input id="date" class="datepick input-mini" name="date[]" type="text" /></td> <td><input id="time" class="input-mini" name="time[]" type="text" /></td> <td><input id="minutes" class="input-mini" name="minutes[]" type="text" /></td> <td><a id="addnew" href=""><i class="icon-plus"></i></a></td> </tr> </tbody> </table> ``` The jquery i do have, looks like this: ``` $(function(){ // start a counter for new row IDs // by setting it to the number // of existing rows $('.datepick').datepicker(); var newRowNum = 0; // bind a click event to the "Add" link $('#addnew').click(function(){ // increment the counter newRowNum = $(productTable).children('tbody').children('tr').length +1; // get the entire "Add" row -- // "this" refers to the clicked element // and "parent" moves the selection up // to the parent node in the DOM var addRow = $(this).parent().parent(); // copy the entire row from the DOM // with "clone" var newRow = addRow.clone(); // set the values of the inputs // in the "Add" row to empty strings $('input', addRow).val(''); // insert a remove link in the last cell $('td:last-child', newRow).html('<a href="" class="remove"><i class="icon-minus"><\/i><\/a>'); // insert the new row into the table // "before" the Add row addRow.before(newRow); // add the remove function to the new row $('a.remove', newRow).click(function(){ $(this).closest('tr').remove(); return false; }); $('#date', newRow).each(function(i){ var newID = 'date_' + i; $(this).attr('id',newID); }); // prevent the default click return false; }); ```