title: Add multiple rows to table dynamically in Javascript
body: <p>I want to be able to add as many rows as I like to a table so that it dynamically grows and shrinks. (Right now I'm just concentrating on it growing) This code works great when I want to add a row to the bottom of the table, however when I want to add a row in the middle of the table, there is something in my code not quite right, (and I get an error).</p>
  
  <p>eg.</p>
  
  <p>title | title | title | <br>
  1....| 1.... | 1....  | addBtn <br></p>
  
  <p>a few mins later</p>
  
  <p>title | title | title |<br>
  1....| 1....| 1....| addBtn <br>
  2....| 2....| 2....| addBtn &lt;- i click on this <br>
  3....| 3....| 3....| addBtn <br>
  4....| 4....| 4....| addBtn</p>
  
  <p>becoming...</p>
  
  <p>title | title | title | <br>
  1....| 1....| 1....| addBtn <br>
  2....| 2....| 2....| addBtn &lt;- i clicked on this <br>
  3....| 3....| 3....| addBtn &lt;- it created this row <br>
  4....| 4....| 4....| addBtn &lt;- this row used to be in place 3 <br>
  5....| 5....| 5....| addBtn &lt;- this row used to be in place 4 <br></p>
  
  <p>I am new to this, but I have spent a day trying to get this working; also looking at the clone feature which doesn't seem to work either for me. I've also never worked with input arrays so if this is not correct then what would you recommend?</p>
  
  <pre><code>&lt;script&gt;
  function displayResult(j)
  {
      if (j &lt;= document.getElementById("purchaseItems").rows.length) {
          for (var i= document.getElementById("purchaseItems").rows.length; i&gt;j ;i--) {
              var elName = "addRow[" + i + "]";
              var newName = "addRow[" + (i+1) + "]";
              var newClick = "displayResult(" + (i+1) + ")";
              var modEl = document.getElementsByName(elName);
  
              modEl.setAttribute("onclick", newClick);
              document.getElementsByName("addRow[" + i + "]").setAttribute('name', "addRow[" + (i+1) + "]");
          }
      }
      var table=document.getElementById("purchaseItems");
      var row=table.insertRow(j);
      var cell1=row.insertCell(0);
      var cell2=row.insertCell(1);
      var cell3=row.insertCell(2);
      var cell4=row.insertCell(3);
      var cell5=row.insertCell(4);
      cell1.innerHTML="&lt;input type=text class='tbDescription' name='description[]' required/&gt;";
      cell2.innerHTML="&lt;input type=text name='itemPrice[]' required /&gt;";
      cell3.innerHTML="&lt;input type=text name='itemquantity[]' required /&gt;";
      cell4.innerHTML="&lt;input type='text' name='lineTotal[]' readonly /&gt;";
      cell5.innerHTML="&lt;input type='button' name='addRow["+ j + "]' class='add' onclick=\"displayResult(" + (j+1) + ")\" value='+' /&gt;";
  }
  </code></pre>
  
  <p></p>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;table id= "purchaseItems" name="purchaseItems" align="center"&gt;
  &lt;tr&gt;
      &lt;th&gt;Description&lt;/th&gt;
      &lt;th&gt;price&lt;/th&gt;
      &lt;th&gt;quantity&lt;/th&gt;
      &lt;th&gt;Line Total&lt;/th&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;input type="text" name="description[]" class="tbDescription" required /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="price[]" required /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="quantity[]" required /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="lineTotal[]" readonly /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" name="addRow[1]" onclick="displayResult(2)" class="add" value='+' /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>