title: Calculate sum of last column in dynamically added rows using javascript
body: <p>I have a table that a user can dynamically add a row as needed. I need to add a text box underneath the table that will dynamically output the total of the last column using JavaScript. If the calculations can't be done dynamically then I can add a calculate button underneath the text box</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-html lang-html prettyprint-override"><code>&lt;HTML&gt;
  &lt;HEAD&gt;
      &lt;TITLE&gt; Add/Remove dynamic rows in HTML table &lt;/TITLE&gt;
   
      &lt;SCRIPT language="javascript"&gt;
  function addRow(tableID) {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      if (rowCount &lt; 4) { // limit the user from creating fields more than your limits
          var row = table.insertRow(rowCount);
  
          var colCount = table.rows[0].cells.length;
          row.id = 'row_'+rowCount;
          for (var i = 0; i &lt; colCount; i++) {
              var newcell = row.insertCell(i);
              newcell.outerHTML = table.rows[0].cells[i].outerHTML;            
          }
         var listitems= row.querySelectorAll("input, select");
         
              for (i=0; i&lt;listitems.length; i++) {
                listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
              }
            
      } else {
          alert("Maximum Passenger per ticket is 4.");
  
      }
  }
  function calculate(elementID) {
      var mainRow = document.getElementById(elementID);
      var myBox1 = mainRow.querySelectorAll('[name=qty]')[0].value;
      var myBox3 = mainRow.querySelectorAll('[name^=sel]')[0].value;
      var total = mainRow.querySelectorAll('[name=total]')[0];
      var myResult1 = myBox1 * myBox3;
      total.value = myResult1;
  
  }
    
  
  &lt;/SCRIPT&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
      
     &lt;input type="button" value="Add" onClick="addRow('dataTable')" /&gt;
  
  &lt;table id="dataTable" class="form" border="1"&gt;
      &lt;tbody&gt;
          &lt;tr id='row_0'&gt;
              &lt;p&gt;
                  &lt;td&gt;
                      &lt;label&gt;Quantity&lt;/label&gt;
                      &lt;input type="number" required="required" name="qty" oninput="calculate('row_0')"&gt;
                  &lt;/td&gt;
                  
                  &lt;td&gt;
                       &lt;label for="sel"&gt;Price&lt;/label&gt;                 
                      &lt;select name="sel" id="sel" oninput="calculate('row_0')" required&gt;
              &lt;option value="" disabled selected&gt;Choose your option&lt;/option&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
              &lt;option value="3"&gt;3&lt;/option&gt;
              &lt;option value="4"&gt;4&lt;/option&gt;
             &lt;/select&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;label for="total"&gt;Total&lt;/label&gt;
                      &lt;input type="text" required="required" class="small" name="total"&gt;
                  &lt;/td&gt;
              &lt;/p&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help will be greatly appreciated.</p>