Replace table row number with the number next to the last table row
<p>I am adding rows via onclick button. I have no issues with adding/appending rows to the last table row and deleting each. My problem is, how can I make the row number to be always next to the last?</p>

<p>My code for adding rows:</p>

<pre><code>var id_age;
function AddRow() {
    var rowCount = $('#dependent_table tbody tr').length;
        id_age = 'age_dependent_'+ rowCount;
        $("#dependent_table").append( "&lt;tr&gt;"+ "&lt;td class='vert-align' style='width:45%;'&gt;&lt;input type='text' class='form-control' name='name_dependent["+rowCount+"]' id='name_dependent_" + rowCount + "'&gt;&lt;/td&gt;"+ "&lt;td class='vert-align' style='width:10%;'&gt;&lt;input type='text' class='form-control' name='age_dependent["+rowCount+"]' id='"+id_age+"' disabled&gt;&lt;/td&gt;"+ "&lt;td class='vert-align' style='width:35%;'&gt;&lt;div class='col-md-12'&gt;&lt;div class='form-group has-feedback' style='margin-top:12px;'&gt;&lt;input class='form-control datePick' id='dob_dependent_"+ i +"' name='dob_dependent["+rowCount+"]' placeholder='YYYY-MM-DD' data-date-format='yyyy-mm-dd' type='text' onchange=\"CalculateAge(this.value,'" + id_age + "');\"/&gt;&lt;i class='glyphicon glyphicon-calendar form-control-feedback'&gt;&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;"+ "&lt;td class='vert-align' style='width:10%;'&gt;&lt;button type='button' class='btn btn-danger btnDelete'&gt;&lt;span class='glyphicon glyphicon-remove' aria-hidden='true'&gt;&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;"+ "&lt;/tr&gt;");
        rowCount++;
        $(".btnDelete").bind("click", Delete);
}

function Delete(){ 
    var par = $(this).parent().parent(); //tr 
    par.remove(); 
}
</code></pre>

<p>Example:</p>

<pre><code>&lt;tr id="dep_row_1"&gt;
    &lt;td&gt;&lt;input type="text" name="name_dependent[1]" value="value1"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id="dep_row_2"&gt;
    &lt;td&gt;&lt;input type="text" name="name_dependent[2]" value="value2"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id="dep_row_3"&gt;
    &lt;td&gt;&lt;input type="text" name="name_dependent[3]" value="value3"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id="dep_row_4"&gt;
    &lt;td&gt;&lt;input type="text" name="name_dependent[4]" value="value4"&gt;&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>If I delete a row in the middle:</p>

<pre><code>&lt;tr id="dep_row_3"&gt;
    &lt;td&gt;&lt;input type="text" name="name_dependent[3]" value="value3"&gt;&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>Then the table should now be:</p>

<pre><code>&lt;tr id="dep_row_1"&gt;
    &lt;td&gt;&lt;input type="text" name="name_dependent[1]" value="value1"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id="dep_row_2"&gt;
    &lt;td&gt;&lt;input type="text" name="name_dependent[2]" value="value2"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id="dep_row_3"&gt;
    &lt;td&gt;&lt;input type="text" name="name_dependent[3]" value="value4"&gt;&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>where <strong>dep_row_4</strong> became <strong>dep_row_3</strong> and so on.</p>

<p>Is this possible?</p>

<p>With my current code, when I have a total of 5 rows and I deleted the 4th row, The id of the last row is still 5 which should be 4.</p>

<p>Your help is highly appreciated.</p>

<p>Thanks!
-Eli</p>