How do I use jQuery to sum up an undefined number of inputs in a table?

Question

I have a table and there are an undefined number of rows, meaning people can add/remove rows client-side. What I would like to do is as someone enters new values in two of the inputs (quantity and rate), I would like to do some addition and multiplication and output that to the page as a sum.

Each row has quantity and rate. Each row should have a total = quantity * rate. Then, I'd like sum up all the totals for the grand total. I'd like to be able to do this client-side as a user is entering their info. Here's what the fields look like:

     <tbody id='line-items'>
        <tr class='fields'>
          <td><input id="invoice_invoice_line_items_attributes_0__destroy" name="invoice[invoice_line_items_attributes][0][_destroy]" type="hidden" value="false" /><a href="javascript:void(0)" class="remove_nested_fields" data-association="invoice_line_items">X</a></td>
          <td><input id="invoice_invoice_line_items_attributes_0_description" label="false" name="invoice[invoice_line_items_attributes][0][description]" size="30" type="text" /></td>
          <td><input class="input-mini" id="invoice_invoice_line_items_attributes_0_quantity" label="false" name="invoice[invoice_line_items_attributes][0][quantity]" size="30" type="text" /></td>
          <td><input class="input-mini" id="invoice_invoice_line_items_attributes_0_rate" label="false" name="invoice[invoice_line_items_attributes][0][rate]" size="30" type="text" /></td>
        </tr>
        <tr class='fields'>
          <td><input id="invoice_invoice_line_items_attributes_1__destroy" name="invoice[invoice_line_items_attributes][1][_destroy]" type="hidden" value="false" /><a href="javascript:void(0)" class="remove_nested_fields" data-association="invoice_line_items">X</a></td>
          <td><input id="invoice_invoice_line_items_attributes_1_description" label="false" name="invoice[invoice_line_items_attributes][1][description]" size="30" type="text" /></td>
          <td><input class="input-mini" id="invoice_invoice_line_items_attributes_1_quantity" label="false" name="invoice[invoice_line_items_attributes][1][quantity]" size="30" type="text" /></td>
          <td><input class="input-mini" id="invoice_invoice_line_items_attributes_1_rate" label="false" name="invoice[invoice_line_items_attributes][1][rate]" size="30" type="text" /></td>
        </tr>
        <tr class='fields'>
          <td><input id="invoice_invoice_line_items_attributes_2__destroy" name="invoice[invoice_line_items_attributes][2][_destroy]" type="hidden" value="false" /><a href="javascript:void(0)" class="remove_nested_fields" data-association="invoice_line_items">X</a></td>
          <td><input id="invoice_invoice_line_items_attributes_2_description" label="false" name="invoice[invoice_line_items_attributes][2][description]" size="30" type="text" /></td>
          <td><input class="input-mini" id="invoice_invoice_line_items_attributes_2_quantity" label="false" name="invoice[invoice_line_items_attributes][2][quantity]" size="30" type="text" /></td>
          <td><input class="input-mini" id="invoice_invoice_line_items_attributes_2_rate" label="false" name="invoice[invoice_line_items_attributes][2][rate]" size="30" type="text" /></td>
        </tr>
      </tbody>

How do I go about doing that on a variable number of rows using jquery and then outputting that to the page? Thanks!

EDIT: I got stuck pretty early on trying to figure out how to get the correct inputs from each row like so:

$('table input[id^=invoice_invoice_line_items_attributes]')

which grabs all the rows but i'm not sure how to skip the number in the ID and check the last word of the ID to make sure it is quantity or rate.

Answer 1

var sum = 0;
$('#line_items input[id$="quantity"]').each(function() {
  sum += parseInt($(this).val());
});

You can also use parseFloat if the numbers are floats