title: jQuery clone tablerow and add datepicker
body: <p>With my very limited knowledge of both jQuery and JS i made a small script (with the help of Nicola Peluchetti) that duplicates a tablerow when a button is clicked. This works like a charm, however, i would like to add a datepicker to it. This also works well, but just once and not on the copied fields or visa versa. It's probably because the datepicker "thinks" there is just one field.</p>
  
  <p>I found several sources to solve the problem, but again, with my newbie knowledge, it's just to hard. I am playing with this for almost two days and can't get it solved.</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
  $(window).load(function(){
  $("input[type='button'].AddRow").click(
  
  function() {
  var index = $(this).closest('tr').index();
  if (index &gt; 0) {
  $(this).closest('tr').remove();
  } else {
  $(this).closest('tr').clone(true).prependTo($(this).closest('table'));
  $(this).val(i++);
  /* $('.startdatum').removeClass('hasDatepicker').datepicker({dateFormat: 'mm-dd-yy'});    */
   }
  
  });
  });//]]&gt; 
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table width="960" border="0" align="center" cellpadding="10" cellspacing="0"     class="contentblock"&gt;
  &lt;tr&gt;
  &lt;td width="140"&gt;&lt;strong&gt;Startdatum&lt;/strong&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input name="startdatum[]" type="text" class="startdatum" value="dd/mm/jjjj" /&gt;
  &lt;script&gt;
  $(function() {
      $('.startdatum').removeClass('hasDatepicker').datepicker({
  dateFormat: 'mm-dd-yy'
  });
  });
  &lt;/script&gt;
    &lt;select name="locatie[]" id="locatie[]"&gt;
      &lt;option value="" selected&gt;&lt;/option&gt;
    &lt;/select&gt;&lt;/td&gt;
    &lt;td width="143"&gt;&lt;strong&gt;Dekking&lt;/strong&gt;&lt;/td&gt;
    &lt;td width="133"&gt;&lt;select name="dekking[]" id="dekking[]"&gt;
    &lt;option value="" selected&gt;&lt;/option&gt;
    &lt;/select&gt;&lt;/td&gt;
    &lt;td width="145"&gt;&lt;input type="Button" value="Add Row" class="AddRow"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p><strong>Potential solutions that i don't get:</strong></p>
  
  <ul>
  <li><a href="http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/" rel="nofollow noreferrer">http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/</a></li>
  <li><a href="https://stackoverflow.com/questions/34790/duplicating-jquery-datepicker/1423156#1423156">duplicating jQuery datepicker</a></li>
  <li><a href="https://stackoverflow.com/questions/2365150/dynamic-jquery-date-picker-code">Dynamic JQuery date picker code</a></li>
  </ul>
  
  <p><strong>Datepickerplugin:</strong></p>
  
  <ul>
  <li><a href="http://jqueryui.com/demos/datepicker/" rel="nofollow noreferrer">http://jqueryui.com/demos/datepicker/</a></li>
  </ul>
  
  <p>Could anyone please help me out?</p>