title: How to attach the datepicker to each row of a table having a same ID?
body: <p>I have a JavaScript function to attach the date picker to each row data of the table and row is dynamically created and uses this date picker function to attached to the field.But the problem is if I created additional row to the table its is  attaching the date picker but in that additional row that datepicker is not working its look like disable state.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  $(document).ready(function() {
    $("input.add").live('click', function() {
       var $tr = $(this).closest('tr');
       var $clone = $tr.clone();
       $clone.find(':text').val('');
       $clone.find(':checkbox:checked').prop('checked', false).val('N');
       $tr.after($clone);
    });
    $("input.delete").live('click', function() {
       var rowCount = document.getElementById('phone').getElementsByTagName("tr").length;
       if (rowCount != 3) {
          var $tr = $(this).closest('tr');
          $tr.remove();
          return false;
       }
    });
  });
  
  $(function() {
    $("#dob").datepicker({
       //showOn: both - datepicker will appear clicking the input box as well as the calendar icon
       //showOn: button - datepicker will appear only on clicking the calendar icon
       showOn: 'button',
       //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
       buttonImage: 'file:///C:/Users/27983/Desktop/calender.jpg',
       buttonImageOnly: true,
       changeMonth: true,
       changeYear: true,
       duration: 'fast',
       dateFormat: 'dd-mm-yy'
    });
  });
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> &lt;style&gt;
     #ui-datepicker-div {
    font-size: 12px;
     }
     
     #datepicker {}
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;body&gt;
     &lt;form name="Basicinfo" id="Basicinfo" method="post" action="Basic.html"&gt;
    &lt;!-- Start Header --&gt;
    &lt;table id="phone" width="100%" name="phone"&gt;
       &lt;tr&gt;
          &lt;td colspan="5" bgcolor="#5C85B3"&gt;Phone&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
          &lt;th&gt;Type&lt;/td&gt;
             &lt;th&gt;Date&lt;/th&gt;
             &lt;th&gt;*Phone&lt;/th&gt;
             &lt;th&gt;Preferred&lt;/th&gt;
             &lt;th&gt;Add/Delete&lt;/th&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
          &lt;td&gt;
             &lt;select name="phntype" id="phntype" style="width:50%"&gt;&lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
             &lt;input id="dob" name="dob" type="text" value=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
             &lt;input type="text" name="phone_no" id="phone_no" value=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
             &lt;input type="hidden" name="prefferd" value="NO"&gt;
             &lt;input type="checkbox" name="preferred" id="preferred" value="N" onchange="changeCheckBox();"&gt;
          &lt;/td&gt;
          &lt;td&gt;
             &lt;input type="button" value="+" class="add"&gt;
             &lt;input type="button" value="-" class="delete"&gt;
          &lt;/td&gt;
       &lt;/tr&gt;
    &lt;/table&gt;
   &lt;/form&gt;
  &lt;/body&gt;               </code></pre>
  </div>
  </div>
  </p>