title: jQuery datepicker on dynamically generated rows
body: <p>I am dynamically generating table rows using the following javascript codes:</p>
  
  <pre><code>$('#addNew').on('click', function() {
      var clone = $('table.table-responsive tr.cloneme:first').clone();
      console.log(clone);
      clone.append("&lt;td&gt;&lt;button class='deleteAdded btn btn-danger'&gt;Remove&lt;/button&gt;&lt;/td&gt;")
      $('table.table-responsive').append(clone);
      calculateSum();
  });
  </code></pre>
  
  <p>And this is my script for appending jQuery calendar to date inputs</p>
  
  <pre><code>$(function() {
      $('input').filter('.datepicker').datepicker({
          dateFormat: 'yy-mm-dd',
          changeMonth: true,
          changeYear: true,
      });
  });
  </code></pre>
  
  <p>Now the problem I am facing is that the jQuery calendar pops up only in the first row. It doesn't work on the rows that are generated.</p>
  
  <p>This in my html</p>
  
  <pre><code>&lt;td&gt;
      &lt;input type="text" class="form-control datepicker" name="invoiceDate[]" readonly="readonly" /&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Please tell me how to make jQuery calendar work on all the rows that are dynamically generated. Looked around Google but nothing helped.</p>
  
  <p>Thanks in advance.  </p>