title: Update calculation function to include dynamically added rows
body: <p>I have a simple function that computes the difference between two text fields: txtItemAmount1 and txtAdjustmentAmount.  The difference it placed in a label (Difference).  </p>
  
  <p>The problem I'm having is that by clicking the "Add Row" button, the user can add more "txtItemAmount" rows. I would like all of these rows to be included in the calculation.  For example, right now if the user enters "20.00" in txtAdjustmentAmount, and "10.00" in txtItemAmount1, the difference label will show "10.00."  If I click the "Add row" button, and type in "1.00" I would like that also added to this calculation, thus the difference would be "11."  Can someone provide a code example of how to incorporate these newly added fields in the calculation?</p>
  
  <p>Thanks!</p>
  
  <pre><code>&lt;body&gt;
  &lt;form name="frmInput" id="frmInput"&gt;
  
  &lt;table&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;p&gt;&lt;label for="AdjustmentAmount"&gt;Adjustment Amount:&lt;/label&gt;&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;p&gt;&lt;input name="txtAdjustmentAmount" type="text" id="txtAdjustmentAmount" size="10" maxlength="10"&gt;&lt;/p&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;p&gt;&lt;strong&gt;&lt;font color="#FF0000"&gt;Difference:&lt;label for="Difference" id="Difference"&gt;&lt;/label&gt;&lt;/font&gt;&lt;/strong&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table id="tblDetail"&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td colspan="6"&gt;Item Amount:&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="6"&gt;
          &lt;input type="button" class="button" value= "Add Row" id="btnNewRow" name="btnNewRow" onClick="javascript:addNewRow();"&gt;
          &lt;input type="hidden" id="txtIndex" name="txtIndex" value="1"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;
          &lt;p&gt;
          &lt;input name="txtItemAmount1" type="text" id="txtItemAmount1" size="10" maxlength="10" 
              onKeyUp="calcDifference(frmInput.txtItemAmount1.value, frmInput.txtAdjustmentAmount.value)"&gt;
          &lt;/p&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  
  
  
  &lt;script language="javascript"&gt;
  
  function addNewRow()
  {
  var iX = document.getElementById("txtIndex").value;
  iX ++;
  document.getElementById("txtIndex").value = iX;
  
  var tbl = document.getElementById("tblDetail").getElementsByTagName("TBODY")[0];
  var tr = document.createElement("TR");
  tbl.appendChild(tr);
  
  
  
  //txtItemAmount1
  var tdItemAmount = document.createElement("TD");
  tr.appendChild(tdItemAmount);
  
  var p = document.createElement("P");
  tdItemAmount.appendChild(p);
  
  var txtItemAmount = document.createElement("input"); 
  p.appendChild(txtItemAmount);
  
  txtItemAmount.id = "txtItemAmount" + iX;
  txtItemAmount.setAttribute('name','txtItemAmount' + iX);
  txtItemAmount.setAttribute('size',10);
  }
  
  
  function calcDifference(txtAdjustmentAmount, txtItemAmount) 
  {   
  var txtAdjustmentAmount = parseFloat(document.getElementById('txtAdjustmentAmount').value);
  var txtItemAmount   = parseFloat(document.getElementById('txtItemAmount1').value); 
  var Difference = txtItemAmount - txtAdjustmentAmount; 
  document.getElementById('Difference').innerHTML = Difference
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>