title: How to dynamically add row and calculate sum using jquery
body: <p>I am trying to add rows dynamically to a html table to generate a bill using jquery. I want to calculate the grand total dynamically as the rows are added or removed</p>
  
  <p>My code</p>
  
  <p>These are my input fields from which the values are taken. All the DropDown boxes are populated from DB.</p>
  
  <pre><code>&lt;div class="block-fluid"&gt;                        
  
                          &lt;div class="row-form clearfix"&gt;
                              &lt;div class="span3"&gt;Select Product:&lt;/div&gt;
                              &lt;div class="span7"&gt;
                                  &lt;select name="selectprod" id="s2_2" style="width: 100%;"&gt;
                                      &lt;option value="0"&gt;Choose a Product...&lt;/option&gt;
                                     &lt;optgroup id="Tablets" label="Tablets"&gt;
  
                                     &lt;/optgroup&gt;
                                     &lt;optgroup id="Capsule" label="Capsule"&gt;
  
                                     &lt;/optgroup&gt;
                                     &lt;optgroup id="Syrup" label="Syrup"&gt;
  
                                     &lt;/optgroup&gt; 
                                     &lt;optgroup id="Drops" label="Drops"&gt;
  
                                     &lt;/optgroup&gt;
                                     &lt;optgroup id="Inhalers" label="Inhalers"&gt;
  
                                     &lt;/optgroup&gt;
                                     &lt;optgroup id="Topical" label="Topical"&gt;
  
                                     &lt;/optgroup&gt;
                                     &lt;optgroup id="Intravascular" label="Intravascular"&gt;
  
                                     &lt;/optgroup&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;           
                          &lt;div class="row-form clearfix" id="prodnamediv"&gt;
                               &lt;div class="span3"&gt;Product Name:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="prodnameinput" type="text" value="" readonly="readonly"/&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="prodcompdiv"&gt;
                               &lt;div class="span3"&gt;Product Company:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="prodcompinput" type="text" value="" readonly="readonly"/&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="prodtypediv"&gt;
                               &lt;div class="span3"&gt;Product Type:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="prodtypeinput" type="text" value="" readonly="readonly"/&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="proddosediv"&gt;
                               &lt;div class="span3"&gt;Product Dose:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="proddoseinput" type="text" value="" readonly="readonly"/&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="tabletdiv"&gt;
                               &lt;div class="span3"&gt;Tablets Per Strip:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="tabletinput" type="text" value="" readonly="readonly"/&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="prodcapacitydiv"&gt;
                               &lt;div class="span3"&gt;Product Capacity:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="prodcapacityinput" type="text" value="" readonly="readonly"/&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="currentstockdiv"&gt;
                               &lt;div class="span3"&gt;Current Stock Quantity:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="currentstockinput" type="text" value="" readonly="readonly"/&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="prodpricetabcapdiv"&gt;
                               &lt;div class="span3"&gt;Price Per Tablet/Capsule:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="prodpricetabcapinput" type="text" value="" /&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="prodpricediv"&gt;
                               &lt;div class="span3"&gt;Product Price:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="prodpriceinput" type="text" value="" /&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="qtytoselldiv"&gt;
                               &lt;div class="span3"&gt;No. of Quantities to sell:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="qtytosellinput" type="text" value="" /&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="tablettoselldiv"&gt;
                               &lt;div class="span3"&gt;No. of Tablets/Capsules to sell:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="tablettosellinput" type="text" value="" /&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="pkgdatediv"&gt;
                               &lt;div class="span3"&gt;Packaging Date:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="pkgdateinput" type="text" value="" /&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="manufactdiv"&gt;
                               &lt;div class="span3"&gt;Manufacturing Date:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="manufactinput" type="text" value="" /&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="expdatediv"&gt;
                               &lt;div class="span3"&gt;Expiry Date:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                               &lt;input id="expdateinput" type="text" value="" /&gt;
                               &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row-form clearfix" id="batchnodiv"&gt;
                               &lt;div class="span3"&gt;Batch No.:&lt;/div&gt;
                               &lt;div class="span7"&gt;
                                  &lt;select name="select" id="s2_1" style="width: 100%;"&gt;
                                      &lt;option value="0"&gt;choose a option...&lt;/option&gt;                             
                                  &lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="toolbar clearfix"&gt;
                              &lt;div class="right"&gt;
                                  &lt;div class="btn-group"&gt;
                                       &lt;button class="btn" id="addtopurchase" type="button" value="Add"&gt;&lt;span&gt;Add&lt;/span&gt;&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt; 
                      &lt;/div&gt;
  </code></pre>
  
  <p>This is my table which is populated dynamically when above "Add" button is pressed</p>
  
  <pre><code>&lt;div class="block-fluid table-sorting clearfix"&gt;
                          &lt;table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable_2"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th width="20%"&gt;Product&lt;/th&gt;
                                      &lt;th width="12%"&gt;Pkg Date&lt;/th&gt;
                                      &lt;th width="12%"&gt;Mfact date&lt;/th&gt;
                                      &lt;th width="12%"&gt;Expiry&lt;/th&gt;
                                      &lt;th width="12%"&gt;Batch No.&lt;/th&gt;
                                      &lt;th width="12%"&gt;Unit Price&lt;/th&gt;
                                      &lt;th width="10%"&gt;Qty&lt;/th&gt;
                                      &lt;th width="10%"&gt;Subtotal&lt;/th&gt;  
                                      &lt;th&gt;&lt;/th&gt;                                  
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody id="tablebody"&gt;
                                 &lt;tr&gt;
                           &lt;td class="prodname"&gt;prod&lt;/td&gt;
                           &lt;td class="pkgdate"&gt;pkgdate&lt;/td&gt;
                           &lt;td class="manufactdate"&gt;manufactdate&lt;/td&gt;
                           &lt;td class="expdate"&gt;expdate&lt;/td&gt;
                           &lt;td class="batchno"&gt;batchno&lt;/td&gt;
                           &lt;td class="unitprice"&gt;pertabprice&lt;/td&gt;
                           &lt;td class="qty"&gt;qty&lt;/td&gt;
                           &lt;td class="subtot"&gt;subtotal&lt;/td&gt;
                           &lt;td&gt;
                              '&lt;button class="btn btn-link" type="button"&gt;Remove&lt;/button&gt;
                          &lt;/td&gt;
                       &lt;/tr&gt;
                              &lt;/tbody&gt;
                              &lt;tfoot&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;/td&gt;   
                                      &lt;td&gt;&lt;/td&gt; 
                                      &lt;td&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;/td&gt;
                                      &lt;td&gt;Total:&lt;/td&gt;
                                      &lt;td&gt;&lt;/td&gt;
                                      &lt;td&gt;
                                    &lt;div class="toolbar clear clearfix"&gt;
                              &lt;div class="center"&gt;                                
                                  &lt;button type="button" class="btn btn-small btn-warning"&gt;&lt;span class="icon-ok icon-white"&gt;&lt;/span&gt;&lt;/button&gt;                                
                              &lt;/div&gt;
                          &lt;/div&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tfoot&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>This script populates the above table rows dynamically </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
       $('#addtopurchase').click(function(e){
           alert('Clicked');
           var selected = $('#s2_2 :selected');
           var type = selected.parent().attr('label');
           var prod = $('#s2_2 option:selected').text();
           if(prod != "Choose a Product...")
               {
               alert('In prod');
  
               if(type == "Tablets" || type == "Capsule")
                   {
                   alert('In tablets');
                   var stock = Number($('#currentstockinput').val());
                   var qty = Number($('#tablettosellinput').val().replace(/[^0-9\.]+/g,""));
                   if(qty &lt; stock)
                   {
                   var pertabprice = Number($('#prodpricetabcapinput').val().replace(/[^0-9\.]+/g,"")).toFixed(2);
                   var subtotal = qty * pertabprice;
                   var pkgdate = $('#pkgdateinput').val();
                   var manufactdate = $('#manufactinput').val();
                   var expdate = $('#expdateinput').val();
                   var batchno = $('#s2_1 option:selected').text();
  
                   $('#tablebody').prepend('&lt;tr&gt;'+
                           '&lt;td class="prodname"&gt;'+prod+'&lt;/td&gt;'+
                           '&lt;td class="pkgdate"&gt;'+pkgdate+'&lt;/td&gt;'+
                           '&lt;td class="manufactdate"&gt;'+manufactdate+'&lt;/td&gt;'+   
                           '&lt;td class="expdate"&gt;'+expdate+'&lt;/td&gt;'+ 
                           '&lt;td class="batchno"&gt;'+batchno+'&lt;/td&gt;'+
                           '&lt;td class="unitprice"&gt;'+pertabprice+'&lt;/td&gt;'+
                           '&lt;td class="qty"&gt;'+qty+'&lt;/td&gt;'+
                           '&lt;td class="subtot"&gt;'+subtotal+'&lt;/td&gt;'+
                           '&lt;td&gt;'+
                              '&lt;button class="btn btn-link" type="button"&gt;Remove&lt;/button&gt;'+
                          '&lt;/td&gt;'+
                       '&lt;/tr&gt;');
  
                   }
                   else
                       {
                       alert('Not enough Stock');
                       }
                   loadgrandtotal();
                   }
               else
                   {
  
                   var stock = Number($('#currentstockinput').val());
                   var qty = Number($('#qtytosellinput').val().replace(/[^0-9\.]+/g,""));
                   if(qty &lt; stock)
                   {
  
                   var prodprice = Number($('#prodpriceinput').val().replace(/[^0-9\.]+/g,"")).toFixed(2);
  
                   var subtotal = qty * prodprice;
  
                   var pkgdate = $('#pkgdateinput').val();
  
                   var manufactdate = $('#manufactinput').val();
  
                   var expdate = $('#expdateinput').val();
  
                   var batchno = $('#s2_1 option:selected').text();
  
                   $('#tablebody').prepend('&lt;tr&gt;'+
                           '&lt;td class="prodname"&gt;'+prod+'&lt;/td&gt;'+
                           '&lt;td class="pkgdate"&gt;'+pkgdate+'&lt;/td&gt;'+
                           '&lt;td class="manufactdate"&gt;'+manufactdate+'&lt;/td&gt;'+   
                           '&lt;td class="expdate"&gt;'+expdate+'&lt;/td&gt;'+ 
                           '&lt;td class="batchno"&gt;'+batchno+'&lt;/td&gt;'+
                           '&lt;td class="unitprice"&gt;'+prodprice+'&lt;/td&gt;'+
                           '&lt;td class="qty"&gt;'+qty+'&lt;/td&gt;'+
                           '&lt;td class="subtot"&gt;'+subtotal+'&lt;/td&gt;'+
                           '&lt;td&gt;'+
                              '&lt;button class="btn btn-link" type="button"&gt;Remove&lt;/button&gt;'+
                          '&lt;/td&gt;'+
                       '&lt;/tr&gt;');
  
                   }
                   else
                       {
                       alert('Not enough Stock');
                       }
                   }
               loadgrandtotal();
               }
           else
               {
  
               }
  
       })
  
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>Here is the problem. This script should calculate all the subtotals and generate Grand Total
  But this script doesn't seem to work and I am not able to figure out why. The td values are read from class ".subtot" which is associated with a td and is generated dynamically using above script</p>
  
  <pre><code>     &lt;script type="text/javascript"&gt;
           function loadgrandtotal()
           {
  var sum=0;
  var prodprice = 0;
               $('#tSortable_2 tbody tr').each(function() {
                  var prodprice = Number($(this).find(".subtot").text()).toFixed(2);  
                  sum = sum + prodprice;
               });
  
           }
          &lt;/script&gt;
  </code></pre>