title: Add and remove table rows dynamically with jQuery
body: <p>I am a beginner in jQuery. I have to put add and remove buttons to each table row. When remove any of row, I want the first column values to be serialized in ascending order. Now I just don't get it. Will appreciate for your help.</p>
  
  <p>These are my jQuery codes:</p>
  
  <pre><code>$(function(){
          $(".addButton").click(function(){
              var x=document.getElementById('applyList');
              var new_row = x.rows[1].cloneNode(true);
              var len = x.rows.length;
              new_row.cells[0].innerHTML = len;
              var select = new_row.cells[1].getElementsByTagName('select')[0];
              select.id += len;
              select.value = '1';
              var inp1 = new_row.cells[2].getElementsByTagName('input')[0];
              inp1.id += len;
              inp1.value = '';
              var inp2 = new_row.cells[3].getElementsByTagName('input')[0];
              inp2.id += len;
              inp2.value = '';
              x.appendChild( new_row );
          });
  
          $(document).on('click', '.deleteButton', function() {
              var x = $('#applyList tr').length;
              if(x == 2){
              } else {
                   $(this).closest("tr").remove();
                   var row = $(this).closest("tr") // get to the row
                   row.children().each(function(){
  
                   });
              }
          });
      });
  </code></pre>
  
  <p>This is html codes:</p>
  
  <pre><code>&lt;table class="list" id="applyList"&gt;
                                  &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th class="thead color-white width-30"&gt;#&lt;/th&gt;
                                      &lt;th class="thead color-white width-150"&gt;Route&lt;/th&gt;
                                      &lt;th class="thead color-white width-50"&gt;Fare [MMK]&lt;/th&gt;
                                      &lt;th class="thead color-white width-50"&gt;Remark&lt;/th&gt;
                                      &lt;th class="thead color-white"&gt;
                                          &lt;button type="button" id="add" class="button-style tbl-button button-sm bg-color-sky-blue"&gt;ADD&lt;/button&gt;
                                      &lt;/th&gt;
                                  &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;1&lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;select&gt;
                                              &lt;option value="1"&gt;Home-&gt;Office-&gt;Home&lt;/option&gt;
                                          &lt;/select&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" class="width-50"/&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
                                      &lt;td&gt;
  
  
                                          &lt;img class="addButton width-30 height-30 align-middle" src="../../public/img/busfare/plus.png"/&gt;
                                          &lt;img class="deleteButton width-30 height-30 align-middle" src="../../public/img/busfare/minus.png"/&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
  
                              &lt;/table&gt;
  </code></pre>
  
  <p>The output is here:</p>
  
  <p><a href="https://i.stack.imgur.com/Ukp0Y.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ukp0Y.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://jsfiddle.net/nwt31t45/" rel="nofollow noreferrer">Fiddle Link</a></p>