gravity forms subtotal next to each product quantity jquery

Question

I'm using Gravity Forms product fields to create an order form type system.

I'm trying to calculate each product's subtotal (cost * quantity) and display it via jQuery next to the quantity.

Here is my jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $('.gfield_price .ginput_container').append('<div class="product_subtotal">SUBTOTAL</div>');
        $('.ginput_quantity').keypress( function( ) {
            $x = $('.ginput_quantity');
            $x.next('div.product_subtotal').html( this.value );
        });
    });
</script>

Here is a snippet of my html:

<li id='field_5_12' class='gfield gfield_price gfield_price_5_12 gfield_product_5_12' >
    <label class='gfield_label' for='input_5_12'>500 GPH Bilge Pump 24V</label>
    <div class='ginput_container'>
        <input type='hidden' name='input_12.1' value='500 GPH Bilge Pump 24V' class='gform_hidden' />
        <span class='ginput_product_price_label'>Price:</span>
        <span class='ginput_product_price' id='input_5_12'>$2.99</span>
        <input type='hidden' name='input_12.2' id='ginput_base_price_5_12' class='gform_hidden' value='$2.99'/>
        <span class='ginput_quantity_label'>Quantity:</span>
        <input type='text' name='input_12.3' value='' id='ginput_quantity_5_12' class='ginput_quantity' size='10' tabindex='6'/>
    </div>
</li>

As you can see currently I'm just trying to update the product_subtotal div with the value that is entered into the quantity field. I'll worry about the actual calculations later. My problem is that I'm unsure how to select just the next div.product_subtotal as $x.next() selects every product_subtotal.

Answer 1

Your next() method selects all the div tags with class of .product_subtotal because you are selecting all the .ginput_quantit inputs on the page before calling the next() method which selects all the div tags with class of .product_subtotal, try this:

$('.ginput_quantity').keypress( function( ) {
    $x = $(this); // just this input element
    $x.next('div.product_subtotal').html( this.value ); 
});