How do I create sub groups within table using jQuery?

I am creating a stock portfolio. Each row is a stock and it's d开发者_如何学运维ata including profit/loss. each row has a groupid that the user can specify. The idea is I want to:

1. physically group the rows based on the groupid
2. after step #1 I want to dynamically add a row below that group with the subtotal of the profit/losses for that group only.

So each group can contain many rows, and each group will have one subtotal row that adds up all the profit/losses for that group. I just want to make sure that subtotal row is always right below the last row in that group.

I will need to be able to do this whenever someone adds a new row to my table (I allow them to dynamically add new rows through the UI). that is, if someone adds a new row and gives it a groupid of 3, I need to at that moment stick that row with the other groupid 3 rows and include it in the subtotal calculation.

Use <tbody> elements to group table rows.

<table>
<tbody id="GOOG">
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</tbody>
<tbody id="GOOG_subtotal">
  <tr>...</tr>
</tbody>
...
</table>

with:

function append(code, amount) {
  $("<td></td>").text(amoung).wrap("<tr></tr>").appendTo("#" + code);
  var subtotal = $("#" + code + "_subtotal td");
  subtotal.text(subtotal.text() + amount);
}