title: How to dynamically add a table row with textbox?
body: <p>I have a table where each row contains 4 cells and each cell contains a textbox
  by default. I have only 1 row and a button that allows me to add an additional row every time it's clicked.</p>
  
  <p>How do I dynamically add table rows containing textboxes in Javascript?</p>
  
  <p>I would also like to have their textbox id change:</p>
  
  <pre><code>&lt;input type="text" id="txtbox1" /&gt;
  &lt;input type="text" id="txtbox2" /&gt;
  </code></pre>
  
  <p>Right now, I have code that adds the cells:</p>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function insertRow(){
                  var table=document.getElementById("tbSibling");
                  var row=table.insertRow(2);
                  var cell1=row.insertCell(0);
                  var cell2=row.insertCell(1);
                  var cell3=row.insertCell(2);
                  var cell4=row.insertCell(3);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>The Table:</strong></p>
  
  <pre><code>&lt;table id="myTable"&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Age&lt;/th&gt;
          &lt;th&gt;Gender&lt;/th&gt;
          &lt;th&gt;Occupation and Employer&lt;/th&gt;
          &lt;th&gt;Add&lt;/th&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="text" id="txtName" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" id="txtAge" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" id="txtGender" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" id="txtOccupation" /&gt;&lt;/td&gt;
              &lt;td id="btnAdd" class="button-add" onclick="insertRow();"&gt;add&lt;/td&gt;
          &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>