title: Perform calculations on dynamically added rows
body: <p>Below form calculates the total by multiplying the price and quantity values using Javascript and shows that value in the Total 'input box' automatically.</p>
  
  <pre><code>&lt;html&gt; 
  &lt;script&gt;
      function calculate() {
      var myBox1 = document.getElementById('qty').value;  
      var myBox2 = document.getElementById('price').value;
      var myResult1 = myBox1 * myBox2;
      total.value = myResult1;
  
      }       
  &lt;/script&gt; 
  &lt;body&gt;
  &lt;p&gt; 
  
             &lt;table id="dataTable" class="form" border="1"&gt;
                &lt;tbody&gt;
                  &lt;tr&gt;
                    &lt;p&gt;
                    &lt;td&gt;
                          &lt;label&gt;Quantity&lt;/label&gt;
                          &lt;input type="text" required="required" name="qty" id="qty" oninput="calculate()"&gt;
                       &lt;/td&gt;
                       &lt;td&gt;
                          &lt;label for="price"&gt;Price&lt;/label&gt;
                          &lt;input type="text" required="required" class="small"  name="price" id="price" oninput="calculate()"&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" id="total"&gt;
  
                       &lt;/td&gt;
                       &lt;td&gt;
  
                       &lt;/td&gt;
                          &lt;/p&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now added a 'Add/Remove' option (using Javascript) like shown below which adds/removes rows to the form and still want the calculation to take place for each individual row like previously. Please help me out as am new to this.</p>
  
  <pre><code>&lt;html&gt;
  &lt;script&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;
          for(var i=0; i&lt;colCount; i++) {
              var newcell = row.insertCell(i);
              newcell.innerHTML = table.rows[0].cells[i].innerHTML;
          }
      }else{
           alert("Maximum Passenger per ticket is 4.");
  
      }
  }
  
  function deleteRow(tableID) {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      for(var i=0; i&lt;rowCount; i++) {
          var row = table.rows[i];
          var chkbox = row.cells[0].childNodes[0];
          if(null != chkbox &amp;&amp; true == chkbox.checked) {
              if(rowCount &lt;= 1) {                         // limit the user from removing all the fields
                  alert("Cannot Remove all the Passenger.");
                  break;
              }
              table.deleteRow(i);
              rowCount--;
              i--;
          }
      }
  }
  
  function calculate() {
          var myBox1 = document.getElementById('qty').value;  
          var myBox2 = document.getElementById('price').value;
          var myResult1 = myBox1 * myBox2;
          total.value = myResult1;
  
      }       
  &lt;/script&gt; 
  &lt;body&gt;
  &lt;p&gt; 
                  &lt;input type="button" value="Add" onClick="addRow('dataTable')" /&gt; 
                  &lt;input type="button" value="Remove" onClick="deleteRow('dataTable')"  /&gt; 
  
             &lt;table id="dataTable" class="form" border="1"&gt;
                &lt;tbody&gt;
                  &lt;tr&gt;
                    &lt;p&gt;
                    &lt;td&gt;
                          &lt;label&gt;Quantity&lt;/label&gt;
                          &lt;input type="text" required="required" name="qty" id="qty" oninput="calculate()"&gt;
                       &lt;/td&gt;
                       &lt;td&gt;
                          &lt;label for="price"&gt;Price&lt;/label&gt;
                          &lt;input type="text" required="required" class="small"  name="price" id="price" oninput="calculate()"&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" id="total"&gt;
  
                       &lt;/td&gt;
                      &lt;/p&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>P.S: Though I was able to find two posts similar to this one, am unable to implement those solutions due to my limited knowledge of Javascript. Only created this post after trying in vain to find a solution for the past one week or so. </p>