title: jQuery Calculations after appending more input fields
body: <p>I am building an expense template an am having an issue regarding using jQuery Calculations and click functionality to append a set of input fields.</p>
  
  <p>I am combining twooncodes, one to calculate the sum of the values in input fields, and the other to Add a new row of input fields when the user clicks so (these are also to be added to the sum). Problem is, the sum is not adding to the total from the newly appended rows. Only the default row of fields adds.</p>
  
  <p>Any help is appreciated (Fiddle ex: <a href="http://jsfiddle.net/NicoleScotsburn/o8x02sjh/4/" rel="nofollow">http://jsfiddle.net/NicoleScotsburn/o8x02sjh/4/</a> )</p>
  
  <p>Appending table with inputs code:</p>
  
  <pre><code>            //Increment Variables
              var items = $('#items');
              var i = $('#items td').size() + 1;
              var mileage = $('#mileage');
              var j = $('#mileage td').size() + 1;
  
              //Append Table Rows
              $('#addItem').on('click', function() {
                      $('&lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;label for="date"&gt;&lt;input type="text" id="date" size="10" name="date_' + i +'" value="" placeholder="mm/dd/yyyy" /&gt;&lt;/label&gt;&lt;/td&gt;' +
                        '&lt;td&gt;&amp;nbsp;&lt;label for="desc"&gt;&lt;input type="text" id="desc" size="30" name="desc_' + i +'" /&gt;&lt;/label&gt;&lt;/td&gt;' +
                        '&lt;td&gt;&amp;nbsp;$&lt;label for="entmt"&gt;&lt;input type="text" id="sum" size="10" name="entmt_' + i +'" placeholder="0.00" /&gt;&lt;/label&gt;&lt;/td&gt;' +
                        '&lt;td&gt;&amp;nbsp;$&lt;label for="meals"&gt;&lt;input type="text" id="sum" size="10" name="meals_' + i +'" placeholder="0.00" /&gt;&lt;/label&gt;&lt;/td&gt;' +
                        '&lt;td&gt;&amp;nbsp;$&lt;label for="other"&gt;&lt;input type="text" id="sum" size="10" name="other_' + i +'" placeholder="0.00" /&gt;&lt;/label&gt;&lt;/td&gt;' +
                        '&lt;td&gt;&amp;nbsp;$&lt;label for="travel"&gt;&lt;input type="text" id="sum" size="10" name="travel_' + i +'" placeholder="0.00" /&gt;&lt;/label&gt;&lt;/td&gt;' +
                        '&lt;td&gt;&amp;nbsp;$&lt;label for="lodging"&gt;&lt;input type="text" id="sum" size="10" name="lodging_' + i +'" placeholder="0.00" /&gt;&lt;/label&gt;&lt;/td&gt;' +
                        '&lt;td&gt;&amp;nbsp;$&lt;label for="hst"&gt;&lt;input type="text" id="sum" size="10" name="hst_' + i +'" placeholder="0.00" /&gt;&lt;/label&gt;&lt;/td&gt;' +
                        '&lt;td&gt;&amp;nbsp;&lt;a href="#" id="remItem"&gt;Remove&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;').appendTo(items);
                      i++;
                      return false;
              });
  
              $('#addMileage').on('click', function() {
                      $('&lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;label for="mdate"&gt;&lt;input type="text" id="mdate" size="10" name="mdate' + j +'" value="" placeholder="mm/dd/yyyy" /&gt;&lt;/label&gt;&lt;/td&gt;' +
                        '&lt;td&gt;&amp;nbsp;&lt;label for="mlocation"&gt;&lt;input type="text" id="mlocation" size="30" name="mlocation' + j +'" value="" placeholder="" /&gt;&lt;/label&gt;&lt;/td&gt;' +
                        '&lt;td&gt;&amp;nbsp;&lt;label for="km"&gt;&lt;input type="text" id="km" size="10" name="km' + j +'" value="" placeholder="" /&gt;KM&lt;/label&gt;&lt;/td&gt;' +
                        '&lt;td&gt;&amp;nbsp;&lt;a href="#" id="remMileage"&gt;Remove&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;').appendTo(mileage);
                      j++;
                      return false;
              });
  
  
              //Remove Buttons
              $('body').on('click', '#remItem', function() { 
                      if( i &gt; 2 ) {
                              $(this).parents('tr').remove();
                              i--;
                      }
                      return false;
              });
              $('body').on('click', '#remMileage', function() { 
                  if( j &gt; 2 ) {
                          $(this).parents('tr').remove();
                          j--;
                  }
                  return false;
               });
  </code></pre>
  
  <p>Calculation function: (This works assuming the id of the input is id="sum" and gets outputted to another input called totalsum. </p>
  
  <pre><code>        $("input[id^=sum]").sum("keyup", "#totalSum");
  </code></pre>