title: How to keep the serial number to stay with the sequence in a html table with dynamic add/remove?
body: <p>I have a table like below and its rows can be added and removed by using the add/remove buttons.</p>
  
  <pre><code>&lt;table class="dynatable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;button class="add"&gt;Add&lt;/button&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Col 3&lt;/th&gt;
              &lt;th&gt;Col 4&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="prototype"&gt;
              &lt;td&gt;&lt;input type="text" name="id[]" value="0" class="id" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" name="name[]" value="" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" name="col4[]" value="" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" name="col3[]" value="" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The first column in the table contains the serial number. But when the rows are removed in between it is losing its sequence.</p>
  
  <p>For example if there are rows 5 rows with serial sequence of 1,2,3,4,5</p>
  
  <p>If the row with the serial number of 3 is removed the serial number will lose the sequence to 1,2,4,5</p>
  
  <p>But I want the serial numbers in the first column to keep the sequence like 1,2,3,4 after removing a row from a five rows</p>
  
  <p>And if I add 5 rows and removed all the rows and start to add rows again. the sequence starts from 6 instead of 1.</p>
  
  <p>How can I do it using jQuery?</p>