title: Dynamic input Field calculate subtotal and grand total
body: <p>Dynamic Input price,tax rate and subtotal display in each row.
  sum of subtotal display in subtotal field
  when we type display subtract discount</p>
  
  <p>Fiddle works 1st row tax calculation. when add new field dynamically tax rate calculation not working properly.</p>
  
  <p><a href="http://jsfiddle.net/vXHa6/12/" rel="nofollow">http://jsfiddle.net/vXHa6/12/</a></p>
  
  <pre><code>$(function () {
      // Append Invoice Line
      $(document).on('click', '#addnewitem', function () {
          var currentTable = $(this).closest('table').attr('id');
          $('#' + currentTable ).append('&lt;tr&gt;&lt;td&gt;&lt;div class="col-sm-6 col-lg-12"&gt;                &lt;input type="Client Name" class="form-control" id="item_price" placeholder="Item Price" name="item_price"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div class="col-sm-6 col-lg-12"&gt;&lt;select name="tax" class="form-control" id="tax"&gt;&lt;option value="0"&gt;None&lt;/option&gt;&lt;option value="12.5"&gt;(12.5%) Service Tax &lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div class="col-sm-6 col-lg-12"&gt;&lt;input type="Client Name" class="form-control price" id="item_tax" placeholder="Tax Amount"  name="item_tax"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div class="col-sm-6 col-lg-12"&gt;&lt;input type="Client Name" class="form-control price" id="sub_total" placeholder="Sub Total"  name="sub_total[]"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;button type="button" id="removeItem" class="btn btn-default removeItem" value="-"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;DELETE&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;');
      });  
  
      //Remove Invoice Line
      $(document).on('click', '#removeItem', function () { 
          var currentTable = $(this).closest('table').attr('id');
          $(this).closest('tr').remove();
          calculateTableSum(currentTable);
          calculateTotal();
      });
  
      function calculateSum() {
          var currentTable = $(this).closest('table').attr('id');
          calculateTableSum(currentTable);
      }
  
      function calculateTableSum(currentTable) {
          var sum = 0;
          $('#' + currentTable + ' input#sub_total').each(function() {
              //add only if the value is number
              if(!isNaN(this.value) &amp;&amp; this.value.length!=0) {
                  sum += parseFloat(this.value);
              }
          });
          //.toFixed() method will roundoff the final sum to 2 decimal places
          $('#' + currentTable + ' input.sumamtcollected').val(sum.toFixed(2));
      }
  
      $(document).on('change', 'input#sub_total', calculateSum);
  
      $('#tax').on('change', function () { 
          var currentTable = $(this).closest('table').attr('id');
          var itemprice = $('#item_price').val();
          var  taxrate = $('#tax').val();       
          var tax =   taxrate * itemprice /100;
          var total = parseFloat(itemprice) + parseFloat(tax);
  
           $('#item_tax').val(tax.toFixed(2));
           $('#sub_total').val(total.toFixed(2));
           calculateTableSum(currentTable);
           calculateTotal();
      });    
  });
  </code></pre>