title: creating new row on button click
body: <p>I have an html table with one or more row. I have 4 columns in my table in that one is a checkbox. Two buttons are there "AddRowAbove" and "AddRowBelow". When a particular checkbox is checked and click a button a new row should be added based on the button name. My code looks like this not sure how to achieve the result. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addNewRowAbove() {
  
    alert("actioned !!!");
    var rowNumber = document.getElementById("rowIndex").value;
    var rowNumberNew = parseInt(rowNumber) - 1;
    alert(rowNumber + " - " + rowNumberNew);
    var newRow = $('&lt;tr/&gt;').attr('id', 'row' + rowNumberNew);
    newRow.html('&lt;td&gt;&lt;input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"&gt;&lt;/input&gt;&lt;input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="empid" id="empid' + rowNumberNew + '"&gt;&lt;/input&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="empfname" id="empfname' + rowNumberNew + '"&gt;&lt;/input&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="emplname" id="emplname' + rowNumberNew + '"&gt;&lt;/input&gt;&lt;/td&gt;');
    $('#maintable tbody').append(newRow);
  }
  
  function addNewRowBelow() {
  
    alert("actioned !!!");
    var rowNumber = document.getElementById("rowIndex").value;
    var rowNumberNew = parseInt(rowNumber) + 1;
    alert(rowNumber + " - " + rowNumberNew);
    var newRow = $('&lt;tr/&gt;').attr('id', 'row' + rowNumberNew);
    newRow.html('&lt;td&gt;&lt;input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"&gt;&lt;/input&gt;&lt;input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="empid" id="empid' + rowNumberNew + '"&gt;&lt;/input&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="empfname" id="empfname' + rowNumberNew + '"&gt;&lt;/input&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="emplname" id="emplname' + rowNumberNew + '"&gt;&lt;/input&gt;&lt;/td&gt;');
    $('#maintable tbody').append(newRow);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form&gt;
    &lt;table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid"&gt;
      &lt;tr&gt;
        &lt;th align="center"&gt;Select&lt;/th&gt;
        &lt;th align="center"&gt;Employee ID&lt;/th&gt;
        &lt;th align="center"&gt;First Name&lt;/th&gt;
        &lt;th align="center"&gt;Last Name&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input type="checkbox" name="radio" id="radio"&gt;&lt;/input&gt;&lt;input type="hidden" id="rowIndex" value="1" /&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="empid"&gt;&lt;/input&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="empfname"&gt;&lt;/input&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="emplname"&gt;&lt;/input&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input type="checkbox" name="radio1" id="radio1"&gt;&lt;/input&gt;&lt;input type="hidden" id="rowIndex" value="2" /&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="empid1"&gt;&lt;/input&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="empfname1"&gt;&lt;/input&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="emplname1"&gt;&lt;/input&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt; &lt;input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()"&gt;&lt;/td&gt;
        &lt;td&gt; &lt;input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>