title: jQuery dynamic table calculation
body: <p>I have made a dynamic form/table and i can't calculate new added rows correctly.</p>
  
  <p>All is fine for static part, but when I add a new row the ID's and classes of a row don't match the function...new added rows are not calculated at all.
  can someone help please?</p>
  
  <pre><code>&lt;div&gt;
  &lt;h2&gt;Offer&lt;/h2&gt;
  &lt;form&gt;
  &lt;table id="t1"&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;button type="button" class="addRow"&gt;Add&lt;/button&gt;&lt;/th&gt;
      &lt;th&gt;Quantity&lt;/th&gt;
      &lt;th&gt;Price per hour&lt;/th&gt;
      &lt;th&gt;Hours&lt;/th&gt;
      &lt;th&gt;Total&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;select name="personal"&gt;&lt;optgroup label="Personal"&gt;&lt;option value="k&amp;ouml;che"&gt;K&amp;ouml;che&lt;/option&gt;&lt;option value="barkeeper"&gt;Barkeeper&lt;/option&gt;&lt;option value="garderobiere"&gt;Garderobiere&lt;/option&gt;&lt;option value="chauffeure"&gt;Chauffeure&lt;/option&gt;&lt;option value="oberkellner"&gt;Oberkellner&lt;/option&gt;&lt;option value="serviceleitung"&gt;Serviceleitung&lt;/option&gt;&lt;option value="hilfskoch"&gt;Hilfskoch&lt;/option&gt;&lt;option value="servicekr&amp;auml;fte"&gt;Servicekr&amp;auml;fte&lt;/option&gt;&lt;/optgroup&gt;&lt;/select&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input name="anzahl" class="amount" value="" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input name="preisps" class="amount" value="" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input name="stunden" class="amount" value="" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input name="total" class="total" id="total1" value="" readonly="readonly" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;br /&gt;
  
  &lt;table id="t2"&gt;
    &lt;tr&gt;
      &lt;td&gt;Netto =&lt;br&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input id="netto" readonly="readonly" name="netto" type="text" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Steuer 19% =&lt;br&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input id="steuer" readonly="readonly" name="steuer" type="text" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Brutto =&lt;br&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input id="brutto" readonly="readonly" name="brutto" type="text" value=""&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
      &lt;br&gt;
    &lt;input type="submit" value="Submit"&gt;
    &lt;input type="reset" value="Reset"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;  
  // main function when page is opened
  $(document).ready(function () {
  
        // function for adding a new row
        var r=1;
        $('.addRow').click(function(){  
            r++;  
            $('#t1').append('&lt;tr id="row'+r+'"&gt;&lt;td&gt;&lt;select name="personal"&gt;&lt;optgroup label="Personal"&gt;&lt;option value="k&amp;ouml;che"&gt;K&amp;ouml;che&lt;/option&gt;&lt;option value="barkeeper"&gt;Barkeeper&lt;/option&gt;&lt;option value="garderobiere"&gt;Garderobiere&lt;/option&gt;&lt;option value="chauffeure"&gt;Chauffeure&lt;/option&gt;&lt;option value="oberkellner"&gt;Oberkellner&lt;/option&gt;&lt;option value="serviceleitung"&gt;Serviceleitung&lt;/option&gt;&lt;option value="hilfskoch"&gt;Hilfskoch&lt;/option&gt;&lt;option value="servicekr&amp;auml;fte"&gt;Servicekr&amp;auml;fte&lt;/option&gt;&lt;/optgroup&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;&lt;input class="amount" value="" /&gt;&lt;/td&gt;&lt;td&gt;&lt;input class="amount" value="" /&gt;&lt;/td&gt;&lt;td&gt;&lt;input class="amount" value="" /&gt;&lt;/td&gt;&lt;td&gt;&lt;input class="total" value="" readonly="readonly" /&gt;&lt;/td&gt;&lt;td&gt;&lt;button type="button" name="remove" id="'+r+'" class="btn_remove"&gt;X&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');
        });
        // remove row when X is clicked     
        $(document).on('click', '.btn_remove', function(){
             var button_id = $(this).attr("id");   
             $('#row'+button_id+'').remove();  
        });
        // calculate everything
        $(document).on("keyup", ".amount", calcAll);      
  });
  
  
  // function for calculating everything
  function calcAll() {
        // calculate total for one row
        var product = 1;
        $(".amount").each(function () {
              if (!isNaN(this.value) &amp;&amp; this.value.length != 0) {
              product *= parseFloat(this.value);
              }
              $("#total1").val(product.toFixed(2));
        });
  
        // sum all totals
        var sum = 0;
        $(".total").each(function () {
            if (!isNaN(this.value) &amp;&amp; this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });
        // show values in netto, steuer, brutto fields
        $("#netto").val(sum.toFixed(2));
        $("#steuer").val(sum.toFixed(2) * 0.19);
        $("#brutto").val(parseFloat(sum.toFixed(2)) + parseFloat(($("#steuer").val())));
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>here is my source code:</p>
  
  <p><a href="http://jsfiddle.net/p2Hbm/86/" rel="nofollow">http://jsfiddle.net/p2Hbm/86/</a></p>