Using the same jQuery in multiple operations

Question

I have a small question and I hope someone can help me with it :D

I’m trying to create a product table, in which a user just add the quantity of a product and the jquery makes the multiplication to its value and gives the result

I already made this, and it works well:

    <script>
$(document).ready(function(){           
    $('#quantity_1').keyup(function(){   
    var price_1 = $("#price_1").val();
    var quantity_1 = $("#quantity_1").val();
    quantity_1 = quantity_1.replace(/[^0-9]+/g, '');
    $("#quantity_1").val(quantity_1);
    var total_1 = price_1 * quantity_1;
    $( "#total_1" ).val( total_1.toFixed(2) );
    });
});
</script>

        <table border="1" cellpadding="5px" cellspacing="0" >
        <tr>
        <td>Product</td>
        <td>Price</td>
        <td>Quantity</td>
        <td>Total</td>
      </tr>
    <tr>
        <td>Product Name</td>
        <td><input type="hidden" name="product[1][price]" id="price_1" value="10.00"  />10.00</td>
        <td><input type="text" name="product[1][quantity]" id="quantity_1"  /></td>
        <td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
      </tr>
    </table>

Working demo here: http://jsfiddle.net/EnterateNorte/9kswL0gf/

But I would like to be able to add more than one line, like so:

<table border="1" cellpadding="5px" cellspacing="0" >
    <tr>
    <td>Product</td>
    <td>Price</td>
    <td>Quantity</td>
    <td>Total</td>
  </tr>
<tr>
    <td>Name 1</td>
    <td><input type="hidden" name="product[1][price]" id="price_1" value="10.00"  />10.00</td>
    <td><input type="text" name="product[1][quantity]" id="quantity_1"  /></td>
    <td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
  </tr>
<tr>
    <td>Name 5</td>
    <td><input type="hidden" name="product[5][price]" id="price_5" value="10.00"  />23.00</td>
    <td><input type="text" name="product[5][quantity]" id="quantity_5"  /></td>
    <td><input type="text" name="product[5][total]" id="total_5" value="0" /></td>
  </tr>
<tr>
    <td>Name 3</td>
    <td><input type="hidden" name="product[3][price]" id="price_3" value="130.00"  />10.00</td>
    <td><input type="text" name="product[3][quantity]" id="quantity_3"  /></td>
    <td><input type="text" name="product[3][total]" id="total_3" value="0" /></td>
  </tr>
<tr>
    <td>Name 4</td>
    <td><input type="hidden" name="product[4][price]" id="price_4" value="12.00"  />10.00</td>
    <td><input type="text" name="product[4][quantity]" id="quantity_4"  /></td>
    <td><input type="text" name="product[4][total]" id="total_4" value="0" /></td>
  </tr>
</table>

And if it isn’t to much trouble, I would be awesome if it would SUM all the totals and show a gran total at the end of the table :)

Answer 1

Use:

$(document).ready(function(){           
   $('[name*=quantity]').keyup(function(){   
     var price = $(this).parent().prev().find('input').val();
     var quantity = $(this).val();
     var total = price * quantity;
     $(this).parent().next().find('input').val( total.toFixed(2) );
});});

Working Demo

Update: For showing Grand Total

    var sum = 0;
    //iterate through each textboxes and add the values
    $('[name*=total]').each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseInt(this.value);
        }

    });

Working Demo

Answer 2

What you can do is to find the elements using their relative position instead of hard coded ids

$(document).ready(function () {
    $('input[id^="quantity_"]').keyup(function () {
        var $tr = $(this).closest('tr');
        var price = $tr.find('input[id^="price_"]').val();
        var quantity = this.value;
        var total = (price * quantity) || 0;
        $tr.find('input[id^="total_"]').val(total.toFixed(2));
    });
});

Demo: Fiddle