Scope of selectors - want to keep things local

Scope of selectors - want to keep things local

I'm a relative newbie at jQuery, trying to create a form that, when any given "Quantity" input field is updated, updates itself (calculates the total for the order).

I am working with code taken directly (then modified) from this jquery.calculation.js exmple page , and had it working with a small set of fields (stumbled across the right combination of selectors) then stupidly made some undocumented edits, and find myself right back to where I started - confused.

  1. // bind the recalc function to the quantity fields
                $("input:text").bind("keyup change", recalc);
                // run the calculation function now
                recalc();
        
        function recalc(){
            $("[id$=_subtotal]").calc(
                // the equation to use for the calculation
                "qty * price",
                // define the variables used in the equation, these can be a jQuery object
                {
                    qty: $("[id$=_quantity] input:text"),
                    price: $("[id$=_price]")
                },
                // define the formatting callback, the results of the calculation are passed to this function
                function (s){
                    // return the number as a dollar amount
                    return "$" + s.toFixed(2);
                },
                // define the finish callback, this runs after the calculation has been complete
                function ($this){
                    // sum the total of the $("[id$=_subtotal]") selector
                    var sum = $this.sum();
                    
                    $("#grandTotal").val(
                        // round the results to 2 digits
                        "$" + sum.toFixed(2)
                    );
                }
            );
        }





























And the HTML snippet to go with it, two of about 10 similar fields:
  1. <div class="field stand_quantity" id="stand_quantity">
    <div class="form-item" id="edit-field-stand-quantity-0-value-wrapper">
     <label for="edit-field-stand-quantity-0-value">Stand: </label>
     <input type="text" maxlength="10" name="field_stand_quantity[0][value]" id="edit-field-stand-quantity-0-value" size="12" value="" class="form-text number" />
    </div>
    <span id="stand_price">$159.00</span>
    item total: <span id="stand_subtotal">$0.00</span>
    </div>


    <div class="field book_quantity" id="book_quantity">
    <div class="form-item" id="edit-field-book-quantity-0-value-wrapper">
     <label for="edit-field-book-quantity-0-value">Book: </label>
     <input type="text" maxlength="10" name="field_book_quantity[0][value]" id="edit-field-book-quantity-0-value" size="12" value="" class="form-text number" />
    </div>
    <span id="book_price">$19.99</span>
    item total: <span id="book_subtotal">$0.00</span>
    </div>
















Whenever I add a quantity to the first input, all subtotals get calculated as if they were each ordered the same number of times, and the grand total on the page gets updated accordingly.  None of the other quantity fields have any effect.  I know that the trick is in getting the selectors just right, but I've tried everything I can think of, and to no avail.  What am I missing?

Thanks in advance for any pointers.