title: How do you re-set index on a dynamically added row using jQuery
body: <p>I've searched and couldn't find what i'm looking for. I have a table where i'm dynamically adding rows based on an index. So i click on a link in row 5, i want to add a row at index 6. the problem lies in where when i add the rows, all the original indexes remain. All the code i've seen has to deal with names of a class or an attribute, but this is the index that is given by the html. How do i reset it? Here's my code:</p>
  
  <pre><code>&lt;table class="table" id="inventoryList"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th class="text-center"&gt;#&lt;/th&gt;
      &lt;th&gt;Class Date&lt;/th&gt;
      &lt;th class="text-center"&gt;Time&lt;/th&gt;
      &lt;th&gt;Instruction&lt;/th&gt;
      &lt;th class="text-center"&gt;Registrants&lt;/th&gt;
      &lt;th class="text-center"&gt;Status&lt;/th&gt;
      &lt;th&gt;&amp;nbsp;&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  
    &lt;tr&gt;
      &lt;td class="text-center"&gt;1&lt;/td&gt;
      &lt;td class=""&gt;Friday, December 15, 2017&lt;/td&gt;
      &lt;td class="text-center"&gt;
        &lt;select id="course-time" name="course-time" data-id="34" class="form-control"&gt;
          &lt;option value="0"&gt;...&lt;/option&gt;
  
            &lt;option value="1"&gt;1 AM&lt;/option&gt;
  
            &lt;option value="2"&gt;2 AM&lt;/option&gt;
  
            &lt;option value="3"&gt;3 AM&lt;/option&gt;
  
            &lt;option value="4"&gt;4 AM&lt;/option&gt;
  
            &lt;option value="5"&gt;5 AM&lt;/option&gt;
  
            &lt;option value="6"&gt;6 AM&lt;/option&gt;
  
            &lt;option value="7"&gt;7 AM&lt;/option&gt;
  
            &lt;option value="8" selected=""&gt;8 AM&lt;/option&gt;
  
            &lt;option value="9"&gt;9 AM&lt;/option&gt;
  
            &lt;option value="10"&gt;10 AM&lt;/option&gt;
  
            &lt;option value="11"&gt;11 AM&lt;/option&gt;
  
            &lt;option value="12"&gt;12 AM&lt;/option&gt;
  
            &lt;option value="13"&gt;1 PM&lt;/option&gt;
  
            &lt;option value="14"&gt;2 PM&lt;/option&gt;
  
            &lt;option value="15"&gt;3 PM&lt;/option&gt;
  
            &lt;option value="16"&gt;4 PM&lt;/option&gt;
  
            &lt;option value="17"&gt;5 PM&lt;/option&gt;
  
            &lt;option value="18"&gt;6 PM&lt;/option&gt;
  
            &lt;option value="19"&gt;7 PM&lt;/option&gt;
  
            &lt;option value="20"&gt;8 PM&lt;/option&gt;
  
            &lt;option value="21"&gt;9 PM&lt;/option&gt;
  
            &lt;option value="22"&gt;10 PM&lt;/option&gt;
  
            &lt;option value="23"&gt;11 PM&lt;/option&gt;
  
            &lt;option value="24"&gt;12 PM&lt;/option&gt;
  
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class=""&gt;
        &lt;select id="course-instructor" name="course-instructor" data-id="34" class="form-control"&gt;
          &lt;option value="0"&gt;Choose Instructor&lt;/option&gt;
  
            &lt;option value="1"&gt;Raymond Bieselin&lt;/option&gt;
  
            &lt;option value="2"&gt;Joseph Saglimbene&lt;/option&gt;
  
            &lt;option value="3"&gt;Raymond Scotto&lt;/option&gt;
  
            &lt;option value="4"&gt;James Lawrence&lt;/option&gt;
  
            &lt;option value="5"&gt;Richard Allen&lt;/option&gt;
  
            &lt;option value="6"&gt;Tom Flynn&lt;/option&gt;
  
            &lt;option value="7"&gt;Bob Loveridge&lt;/option&gt;
  
            &lt;option value="8"&gt;Damien Avilies&lt;/option&gt;
  
            &lt;option value="9"&gt;Paul Walsh&lt;/option&gt;
  
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;&lt;a href="#" class="registrants" data-total="0"&gt;&lt;i class="fa fa-user text-info" aria-hidden="true"&gt; [0]&lt;/i&gt;&lt;/a&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;
        &lt;select id="course-status" name="course-status" data-id="34" class="form-control"&gt;
          &lt;option value="open" selected=""&gt;Open&lt;/option&gt;
          &lt;option value="closed"&gt;Closed&lt;/option&gt;
          &lt;option value="cancel"&gt;Cancel&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;&lt;a href="#" class="inventory-delete" data-cid="1" data-id="34"&gt;&lt;i class="fa fa-trash text-danger" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;td class="text-center"&gt;2&lt;/td&gt;
      &lt;td class=""&gt;Thursday, December 14, 2017&lt;/td&gt;
      &lt;td class="text-center"&gt;
        &lt;select id="course-time" name="course-time" data-id="35" class="form-control"&gt;
          &lt;option value="0"&gt;...&lt;/option&gt;
  
            &lt;option value="1"&gt;1 AM&lt;/option&gt;
  
            &lt;option value="2"&gt;2 AM&lt;/option&gt;
  
            &lt;option value="3"&gt;3 AM&lt;/option&gt;
  
            &lt;option value="4"&gt;4 AM&lt;/option&gt;
  
            &lt;option value="5"&gt;5 AM&lt;/option&gt;
  
            &lt;option value="6"&gt;6 AM&lt;/option&gt;
  
            &lt;option value="7"&gt;7 AM&lt;/option&gt;
  
            &lt;option value="8" selected=""&gt;8 AM&lt;/option&gt;
  
            &lt;option value="9"&gt;9 AM&lt;/option&gt;
  
            &lt;option value="10"&gt;10 AM&lt;/option&gt;
  
            &lt;option value="11"&gt;11 AM&lt;/option&gt;
  
            &lt;option value="12"&gt;12 AM&lt;/option&gt;
  
            &lt;option value="13"&gt;1 PM&lt;/option&gt;
  
            &lt;option value="14"&gt;2 PM&lt;/option&gt;
  
            &lt;option value="15"&gt;3 PM&lt;/option&gt;
  
            &lt;option value="16"&gt;4 PM&lt;/option&gt;
  
            &lt;option value="17"&gt;5 PM&lt;/option&gt;
  
            &lt;option value="18"&gt;6 PM&lt;/option&gt;
  
            &lt;option value="19"&gt;7 PM&lt;/option&gt;
  
            &lt;option value="20"&gt;8 PM&lt;/option&gt;
  
            &lt;option value="21"&gt;9 PM&lt;/option&gt;
  
            &lt;option value="22"&gt;10 PM&lt;/option&gt;
  
            &lt;option value="23"&gt;11 PM&lt;/option&gt;
  
            &lt;option value="24"&gt;12 PM&lt;/option&gt;
  
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class=""&gt;
        &lt;select id="course-instructor" name="course-instructor" data-id="35" class="form-control"&gt;
          &lt;option value="0"&gt;Choose Instructor&lt;/option&gt;
  
            &lt;option value="1"&gt;Raymond Bieselin&lt;/option&gt;
  
            &lt;option value="2"&gt;Joseph Saglimbene&lt;/option&gt;
  
            &lt;option value="3"&gt;Raymond Scotto&lt;/option&gt;
  
            &lt;option value="4"&gt;James Lawrence&lt;/option&gt;
  
            &lt;option value="5"&gt;Richard Allen&lt;/option&gt;
  
            &lt;option value="6"&gt;Tom Flynn&lt;/option&gt;
  
            &lt;option value="7"&gt;Bob Loveridge&lt;/option&gt;
  
            &lt;option value="8"&gt;Damien Avilies&lt;/option&gt;
  
            &lt;option value="9"&gt;Paul Walsh&lt;/option&gt;
  
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;&lt;a href="#" class="registrants" data-total="0"&gt;&lt;i class="fa fa-user text-info" aria-hidden="true"&gt; [0]&lt;/i&gt;&lt;/a&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;
        &lt;select id="course-status" name="course-status" data-id="35" class="form-control"&gt;
          &lt;option value="open" selected=""&gt;Open&lt;/option&gt;
          &lt;option value="closed"&gt;Closed&lt;/option&gt;
          &lt;option value="cancel"&gt;Cancel&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;&lt;a href="#" class="inventory-delete" data-cid="1" data-id="35"&gt;&lt;i class="fa fa-trash text-danger" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;td class="text-center"&gt;3&lt;/td&gt;
      &lt;td class=""&gt;Saturday, December 9, 2017&lt;/td&gt;
      &lt;td class="text-center"&gt;
        &lt;select id="course-time" name="course-time" data-id="33" class="form-control"&gt;
          &lt;option value="0"&gt;...&lt;/option&gt;
  
            &lt;option value="1"&gt;1 AM&lt;/option&gt;
  
            &lt;option value="2"&gt;2 AM&lt;/option&gt;
  
            &lt;option value="3"&gt;3 AM&lt;/option&gt;
  
            &lt;option value="4"&gt;4 AM&lt;/option&gt;
  
            &lt;option value="5"&gt;5 AM&lt;/option&gt;
  
            &lt;option value="6"&gt;6 AM&lt;/option&gt;
  
            &lt;option value="7"&gt;7 AM&lt;/option&gt;
  
            &lt;option value="8" selected=""&gt;8 AM&lt;/option&gt;
  
            &lt;option value="9"&gt;9 AM&lt;/option&gt;
  
            &lt;option value="10"&gt;10 AM&lt;/option&gt;
  
            &lt;option value="11"&gt;11 AM&lt;/option&gt;
  
            &lt;option value="12"&gt;12 AM&lt;/option&gt;
  
            &lt;option value="13"&gt;1 PM&lt;/option&gt;
  
            &lt;option value="14"&gt;2 PM&lt;/option&gt;
  
            &lt;option value="15"&gt;3 PM&lt;/option&gt;
  
            &lt;option value="16"&gt;4 PM&lt;/option&gt;
  
            &lt;option value="17"&gt;5 PM&lt;/option&gt;
  
            &lt;option value="18"&gt;6 PM&lt;/option&gt;
  
            &lt;option value="19"&gt;7 PM&lt;/option&gt;
  
            &lt;option value="20"&gt;8 PM&lt;/option&gt;
  
            &lt;option value="21"&gt;9 PM&lt;/option&gt;
  
            &lt;option value="22"&gt;10 PM&lt;/option&gt;
  
            &lt;option value="23"&gt;11 PM&lt;/option&gt;
  
            &lt;option value="24"&gt;12 PM&lt;/option&gt;
  
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class=""&gt;
        &lt;select id="course-instructor" name="course-instructor" data-id="33" class="form-control"&gt;
          &lt;option value="0"&gt;Choose Instructor&lt;/option&gt;
  
            &lt;option value="1"&gt;Raymond Bieselin&lt;/option&gt;
  
            &lt;option value="2"&gt;Joseph Saglimbene&lt;/option&gt;
  
            &lt;option value="3"&gt;Raymond Scotto&lt;/option&gt;
  
            &lt;option value="4"&gt;James Lawrence&lt;/option&gt;
  
            &lt;option value="5"&gt;Richard Allen&lt;/option&gt;
  
            &lt;option value="6"&gt;Tom Flynn&lt;/option&gt;
  
            &lt;option value="7"&gt;Bob Loveridge&lt;/option&gt;
  
            &lt;option value="8"&gt;Damien Avilies&lt;/option&gt;
  
            &lt;option value="9"&gt;Paul Walsh&lt;/option&gt;
  
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;&lt;a href="#" class="registrants" data-total="0"&gt;&lt;i class="fa fa-user text-info" aria-hidden="true"&gt; [0]&lt;/i&gt;&lt;/a&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;
        &lt;select id="course-status" name="course-status" data-id="33" class="form-control"&gt;
          &lt;option value="open" selected=""&gt;Open&lt;/option&gt;
          &lt;option value="closed"&gt;Closed&lt;/option&gt;
          &lt;option value="cancel"&gt;Cancel&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;&lt;a href="#" class="inventory-delete" data-cid="1" data-id="33"&gt;&lt;i class="fa fa-trash text-danger" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;td class="text-center"&gt;4&lt;/td&gt;
      &lt;td class=""&gt;Friday, December 8, 2017&lt;/td&gt;
      &lt;td class="text-center"&gt;
        &lt;select id="course-time" name="course-time" data-id="32" class="form-control"&gt;
          &lt;option value="0"&gt;...&lt;/option&gt;
  
            &lt;option value="1"&gt;1 AM&lt;/option&gt;
  
            &lt;option value="2"&gt;2 AM&lt;/option&gt;
  
            &lt;option value="3"&gt;3 AM&lt;/option&gt;
  
            &lt;option value="4"&gt;4 AM&lt;/option&gt;
  
            &lt;option value="5"&gt;5 AM&lt;/option&gt;
  
            &lt;option value="6"&gt;6 AM&lt;/option&gt;
  
            &lt;option value="7"&gt;7 AM&lt;/option&gt;
  
            &lt;option value="8" selected=""&gt;8 AM&lt;/option&gt;
  
            &lt;option value="9"&gt;9 AM&lt;/option&gt;
  
            &lt;option value="10"&gt;10 AM&lt;/option&gt;
  
            &lt;option value="11"&gt;11 AM&lt;/option&gt;
  
            &lt;option value="12"&gt;12 AM&lt;/option&gt;
  
            &lt;option value="13"&gt;1 PM&lt;/option&gt;
  
            &lt;option value="14"&gt;2 PM&lt;/option&gt;
  
            &lt;option value="15"&gt;3 PM&lt;/option&gt;
  
            &lt;option value="16"&gt;4 PM&lt;/option&gt;
  
            &lt;option value="17"&gt;5 PM&lt;/option&gt;
  
            &lt;option value="18"&gt;6 PM&lt;/option&gt;
  
            &lt;option value="19"&gt;7 PM&lt;/option&gt;
  
            &lt;option value="20"&gt;8 PM&lt;/option&gt;
  
            &lt;option value="21"&gt;9 PM&lt;/option&gt;
  
            &lt;option value="22"&gt;10 PM&lt;/option&gt;
  
            &lt;option value="23"&gt;11 PM&lt;/option&gt;
  
            &lt;option value="24"&gt;12 PM&lt;/option&gt;
  
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class=""&gt;
        &lt;select id="course-instructor" name="course-instructor" data-id="32" class="form-control"&gt;
          &lt;option value="0"&gt;Choose Instructor&lt;/option&gt;
  
            &lt;option value="1"&gt;Raymond Bieselin&lt;/option&gt;
  
            &lt;option value="2"&gt;Joseph Saglimbene&lt;/option&gt;
  
            &lt;option value="3"&gt;Raymond Scotto&lt;/option&gt;
  
            &lt;option value="4"&gt;James Lawrence&lt;/option&gt;
  
            &lt;option value="5"&gt;Richard Allen&lt;/option&gt;
  
            &lt;option value="6"&gt;Tom Flynn&lt;/option&gt;
  
            &lt;option value="7"&gt;Bob Loveridge&lt;/option&gt;
  
            &lt;option value="8"&gt;Damien Avilies&lt;/option&gt;
  
            &lt;option value="9"&gt;Paul Walsh&lt;/option&gt;
  
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;&lt;a href="#" class="registrants" data-total="0"&gt;&lt;i class="fa fa-user text-info" aria-hidden="true"&gt; [0]&lt;/i&gt;&lt;/a&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;
        &lt;select id="course-status" name="course-status" data-id="32" class="form-control"&gt;
          &lt;option value="open" selected=""&gt;Open&lt;/option&gt;
          &lt;option value="closed"&gt;Closed&lt;/option&gt;
          &lt;option value="cancel"&gt;Cancel&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="text-center"&gt;&lt;a href="#" class="inventory-delete" data-cid="1" data-id="32"&gt;&lt;i class="fa fa-trash text-danger" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And here's the jQuery part:</p>
  
  <pre><code>$(document).on('click','.registrants',function(){
    var curIndex = $(this).closest('tr').index();
    $('#inventoryList tr').eq(curIndex).after('&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;');
  });
  </code></pre>