title: datepicker on dynamically created row with inputs
body: <p>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.</p>
  
  <p>Here's fiddle -> <a href="http://jsfiddle.net/HermesTrismegistus/vdFaH" rel="noreferrer">http://jsfiddle.net/HermesTrismegistus/vdFaH</a></p>
  
  <p>My form looks like this:</p>
  
  <pre><code>&lt;table id="productTable" class="table table-striped table-condensed"&gt;
       &lt;thead&gt;
          &lt;tr&gt;
           &lt;th&gt;Product&lt;/th&gt;
           &lt;th&gt;Datum&lt;/th&gt;
           &lt;th&gt;Tijd&lt;/th&gt;
           &lt;th&gt;Minuten&lt;/th&gt;
          &lt;/tr&gt;
       &lt;/thead&gt;
      &lt;tbody&gt;   
       &lt;tr&gt;
          &lt;td&gt;&lt;input id="products" class="input-medium" name="products[]" type="text" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input id="date" class="datepick input-mini" name="date[]" type="text" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input id="time" class="input-mini" name="time[]" type="text" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input id="minutes" class="input-mini" name="minutes[]" type="text" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a id="addnew" href=""&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The jquery i do have, looks like this:</p>
  
  <pre><code>    $(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('&lt;a href="" class="remove"&gt;&lt;i class="icon-minus"&gt;&lt;\/i&gt;&lt;\/a&gt;');
  
              // 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;
          });
  </code></pre>