title: Delete selected rows from HTML table, and adding new rows after it
body: <p>I am able to delete a selected row from my table, but i am having some problem when trying to add in new row after the delete. I will have to press 2 times on my add row button before it gets added. </p>
  
  <p>Please help me on this.
  Thanks</p>
  
  <p>My Code</p>
  
  <pre><code>&lt;div class="container" id="TransactionInternalBlock"&gt;
    &lt;div class="row"&gt;
      &lt;table class="table table-bordered table-hover" id="table_logic" &gt;
        &lt;thead&gt;
        &lt;tr &gt;
          &lt;th class="text-center"&gt;
            #
          &lt;/th&gt;
          &lt;th class="text-center"&gt;
            Product Name
          &lt;/th&gt;
          &lt;th class="text-center"&gt;
            Price
          &lt;/th&gt;
          &lt;th class="text-center"&gt;
            Quantity
          &lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;tr id='addr0'&gt;&lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;a id="add_row" class="btn btn-default pull-left"&gt;Add Row&lt;/a&gt;&lt;a id='delete_row' class="pull-right btn btn-default"&gt;Delete Row&lt;/a&gt;
  &lt;/div&gt;
  &lt;script&gt;
      var i = 0;
      var Mainarray = [];
      $("#add_row").click(function () {
          addrow();
      });
  
      $("#delete_row").click(function(){
          if(i&gt;=0){
              $("#addr"+(i-1)).html('');
              if(i &gt; 0)
              {
                  i--;
              }
          }
      });
      function delrow()
      {
          if(i&gt;=0){
             document.getElementById("table_logic").deleteRow(2);
              if(i &gt; 0)
              {
                  i--;
              }
          }
      }
      function addrow(prodname,prodprice)
      {
          $('#addr' + i).html("&lt;td&gt;" + (i + 1) + "&lt;/td&gt;&lt;td&gt;" + "Choco" + "&lt;/td&gt;&lt;td&gt;$ " + "5.50" + "&lt;/td&gt;&lt;td&gt; 1 &lt;button id=del onclick=delrow()&gt;DELETE&lt;/button&gt;&lt;/td&gt;");
          $('#table_logic').append('&lt;tr id="addr' + (i + 1) + '"&gt;&lt;/tr&gt;');
          i++;
      }
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
      #del
      {
          margin-left:10px;
      }
  &lt;/style&gt;
  </code></pre>