title: How to dynamically add table rows in HTML table from value of input textbox
body: <p>The thing here is adding table rows by inputting value on the text box.
  i.e. If I input 2 on text box and click on submit, it will add two table rows.
  I've been searching for solutions but I can't seem to find an answer, well for now.</p>
  
  <pre><code>&lt;form align="center" method="GET"&gt;
        &lt;input type="text" name="users" id="user_id"&gt;&lt;br&gt;
        &lt;input type="submit" id="mysubmit" value="Submit" onClick="addMoreRows()"&gt;
  &lt;/form&gt;
  
  &lt;table id="tbl_id" style="text-align:center" align="center" valign:"top"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Score&lt;/th&gt;
          &lt;th&gt;Points&lt;/th&gt;
          &lt;th&gt;Total&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
  &lt;/table&gt;
  
  &lt;script type="text/javascript"&gt;
    var rowsAdd = document.getElementById('tbl_id').insertRow();
    var rowsAdded;
    function addMoreRows(){
  
      rowsAdded = document.getElementById('user_id').value();
      for(int x=0; x&lt;rowsAdded; x++){
  
        var newCell = newRow.insertCell();
        newCell.innerHTML="&lt;tr&gt;&lt;td&gt;&lt;input type='text' name='user_name'&gt;&lt;/td&gt;&lt;/tr&gt;";
  
        newCell = newRow.insertCell();
        newCell.innerHTML="&lt;tr&gt;&lt;td&gt;&lt;input type='text' name='score'&gt;&lt;/td&gt;&lt;/tr&gt;";
  
        newCell = newRow.insertCell();
        newCell.innerHTML="&lt;tr&gt;&lt;td&gt;&lt;input type='text' name='points'&gt;&lt;/td&gt;&lt;/tr&gt;";
  
        newCell = newRow.insertCell();
        newCell.innerHTML="&lt;tr&gt;&lt;td&gt;&lt;input type='text' name='total'&gt;&lt;/td&gt;&lt;/tr&gt;";
  
      }
  </code></pre>
  
  <p>Where did I go wrong?
  Or all of the code are totally wrong?</p>