title: how to add datepicker in dynamically created row
body: <p>I am stuck in a query and its not working.
  I created some input textboxes in table row and one button to add new row with same input textboxes when we click on the <code>add Row</code> button.  </p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="text" name="assigned_date[]" value="" id="assigned_date" class="assigned_date" /&gt;
    &lt;span class="text-danger"&gt;&lt;?php echo form_error('assigned_date[]');?&gt;&lt;/span&gt;
  &lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="last_date[]" value="" id="last_date" class="last_date" /&gt;
    &lt;span class="text-danger"&gt;&lt;?php echo form_error('last_date[]');?&gt;&lt;/span&gt;
  &lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="priority[]" value="" /&gt;
    &lt;span class="text-danger"&gt;&lt;?php echo form_error('priority[]');?&gt;&lt;/span&gt;
  &lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="frequency[]" value="" /&gt;
    &lt;span class="text-danger"&gt;&lt;?php echo form_error('frequency[]');?&gt;&lt;/span&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;input class="btn btn-primary" type="button" value="Add Row" onclick="addRow('dataTable')" id="add_button" /&gt;
  &lt;input class="btn btn-primary" type="submit" name="submit" value="submit"&gt;
  </code></pre>
  
  <p>Here is the JQuery code to add new row when we click on the add button</p>
  
  <pre><code> function addRow(tableID) {
  
        var table = document.getElementById(tableID);
  
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
  
        var colCount = table.rows[1].cells.length;
  
        for(var i=0; i&lt;colCount; i++) {
  
          var newcell = row.insertCell(i);
  
          newcell.innerHTML = table.rows[1].cells[i].innerHTML;
          //alert(newcell.childNodes);
          switch(newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                break;
  
          }
        }
      }
  </code></pre>
  
  <p>I am using <code>jQuery-ui datepicker</code> to select date from textbox.
  Here is <code>datepicker</code> code</p>
  
  <pre><code>$('.assigned_date').each(function(){
      $('.assigned_date').removeClass('hasDatepicker').datepicker();
  });
  </code></pre>
  
  <p>When I click the first textbox which is not created by dynamically then it show the calendar and select the date.
  But The Problem is when I click on the add button and it create same row and then if I select the textbox then it not show any calendar. how I can solve this problem..Please help to find the solution.
  When I see by inspect element then it show the class name with <code>hasDatepicker</code></p>
  
  <p>Here is created [fiddle][1] please see</p>
  
  <p><a href="https://jsfiddle.net/r83vmv1q/3/" rel="nofollow">https://jsfiddle.net/r83vmv1q/3/</a></p>