title: Adding row to table with datepicker
body: <p>I am trying to add row with button click in table(Add Row). I am trying to add 2 fields dynamically.
  1) slno<br>
  2) Date/ Time.</p>
  
  <p>My problems :
  1) Row is not getting added.
  2) How to assign datepicker to "Date /Time" field, added dynamically.</p>
  
  <p>Jsfiddle is <a href="http://jsfiddle.net/RXzs7/12/" rel="nofollow">http://jsfiddle.net/RXzs7/12/</a></p>
  
  <p>Pl help.</p>
  
  <p>html code :</p>
  
  <pre><code>&lt;script&gt;  
  $(document).ready(function() {
      $('.date').each(function() {
          $(this).datepicker({ minDate:"-1m",maxDate:"0"  });
      });
  }); 
  &lt;/script&gt;
  
  &lt;body&gt;
  
    &lt;div id="lpage_container"&gt;
      &lt;div class="lform_container"&gt;
        &lt;h3&gt;DETAILS OF LOCAL CONVEYANCE EXPENSES :&lt;/h3&gt;
  
        &lt;form id="localexpenses" action=""&gt;
          &lt;table  summary="local expense" id="localexpense_table" width="500" border="1"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th width="1%" align="center"&gt;&lt;strong&gt;Sl.
                No.&lt;/strong&gt;&lt;/th&gt;
  
                &lt;th width="7%" align="center"&gt;
                &lt;strong&gt;Date/Time&lt;/strong&gt;&lt;/th&gt;          
                &lt;th width="8%" align="center"&gt;
                &lt;strong&gt;Remove&lt;/strong&gt;&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
  
            &lt;tbody bgcolor="#CCCCCC"&gt;
              &lt;tr&gt;
                &lt;td width="1%" align="center"&gt;&lt;input type="text"
                name="lsrno_00" id="srno_00" size="1" value="0"&gt;&lt;/td&gt;
  
                &lt;td width="7%" align="center"&gt;&lt;input type="text" class="date"
                name="ldate_00" id="ldate_00" value="" size="8"&gt;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
  
          &lt;table summary="local buttons" width="500" border="1"&gt;
            &lt;tr&gt;
              &lt;td align="right"&gt;&lt;input type="button" value="Add Row"
              id="add_ExpenseRowlocal"&gt;            
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/form&gt;
      &lt;/div&gt;&lt;!-- END subject_marks --&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>JS code :</p>
  
  <pre><code>$(function(){
      // GET ID OF last row and increment it by one
      var $lastChar =1, $newRow;
      $get_lastID = function(){
          var $id = $('#localexpense_table tr:last-child td:first-child input').attr("name");
          $lastChar = parseInt($id.substr($id.length - 2), 10);
          console.log('GET id: ' + $lastChar + ' | $id :'+$id);
          $lastChar = $lastChar + 1;
          $newRow = "&lt;tr&gt; \
          &lt;td&gt;&lt;input type='text' name='lsrno_0"+$lastChar+"' value='0"+$lastChar+"' size='1'readonly /&gt;&lt;/td&gt; \
          &lt;td&gt;&lt;input type='text' class='date' name='ldate_0"+$lastChar+"' id='date_0"+$lastChar+"' size='8'/&gt;&lt;/td&gt; \
          &lt;td&gt;&lt;input type='button' value='Remove' class='del_ExpenseRowlocal' /&gt;&lt;/td&gt; \
      &lt;/tr&gt;";
          return $newRow;
      };
  
      // ***** -- START ADDING NEW ROWS
      $('#add_ExpenseRowlocal').on("click", function(){ 
  
          if($lastChar &lt;= 9){
              $get_lastID();
              $('#localexpense_table tbody').append($newRow);
          } else {
              alert("Reached Maximum Rows!");
          }
      });
          $(document).on("click", ".del_ExpenseRowlocal", function(){ 
          $(this).closest('tr').remove();
          $lastChar = $lastChar-2;
      }); 
  });
  </code></pre>