title: Add row by clicking on button
body: <p>I have table with two buttons to add different rows and I tried this code but it doesn't work.
  This is my script code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> function addRow(tableID) {
     var table = document.getElementById(tableID);
     var rowCount = table.rows.length;
     var row = table.insertRow(rowCount);
     var colCount = table.rows[1].cells.length;
     var cell1 = row.insertCell(0);
     cell1.innerHTML = rowCount;
     for (var i = 0; i &lt; colCount; i++) {
       var newcell = row.insertCell(i + 1);
       newcell.innerHTML = table.rows[1].cells[i + 1].innerHTML;
     }
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td width="550"&gt;
          &lt;p&gt;&lt;strong&gt;Content&lt;/strong&gt;
          &lt;/p&gt;
        &lt;/td&gt;
        &lt;td width="50"&gt;
          &lt;p align="center"&gt;&lt;strong&gt;CLO&lt;/strong&gt;
          &lt;/p&gt;
        &lt;/td&gt;
        &lt;td width="50"&gt;
          &lt;p align="center"&gt;&lt;strong&gt;PLO&lt;/strong&gt;
          &lt;/p&gt;
        &lt;/td&gt;
        &lt;td width="60"&gt;
          &lt;p align="center"&gt;&lt;strong&gt;Weeks&lt;/strong&gt;
          &lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="module"&gt;
        &lt;td colspan="4" style="width:710; background-color:#A7B8D4; color:white;"&gt;
          &lt;p class="modulenum"&gt;&lt;strong align="center"&gt;MODULE 1&lt;/strong&gt;
          &lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td valign="top" width="550"&gt;
          &lt;p&gt;
            &lt;input type="text" value="" maxlength="255" class="textborder" class="table" id="dataTable2" /&gt;
          &lt;/p&gt;
        &lt;/td&gt;
        &lt;td width="50"&gt;
          &lt;p align="center"&gt;
            &lt;input type="text" value="" maxlength="255" class="textbordersmall" /&gt;
          &lt;/p&gt;
        &lt;/td&gt;
        &lt;td width="50"&gt;
          &lt;p align="center"&gt;
            &lt;input type="text" value="" maxlength="255" class="textbordersmall" /&gt;
          &lt;/p&gt;
        &lt;/td&gt;
        &lt;td width="60"&gt;
          &lt;p align="center"&gt;
            &lt;input type="text" value="" maxlength="255" class="textbordersmall" /&gt;
          &lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr style="border:0px;"&gt;
        &lt;p&gt;
          &lt;input type="button" value="Add row" onclick="addRow1('dataTable2')"&gt;&amp;nbsp; &amp;nbsp;
          &lt;input type="button" value="Add Module" onclick="addRow1('dataTable2')"&gt;
        &lt;/p&gt;
        &lt;br&gt;
        &lt;br&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want when user click on Add Module button it will repeat module row and increment its number. But when click on Add row button it's only repeat row with its textboxes.</p>