jquery calculate on dynamically added rows

Question

I`ve dynamiclally added rows, and i want to auto calculate values on it. Here are part of my code:

<table id="itemsTable" class="general-table">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>Код на продукт</th>
                                    <th>Описание</th>
                                    <th>Брой</th>
                                    <th>Цена</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr class="item-row">
                                        <td></td>
                                        <td><input name="itemCode[]" value="" class="tInput" id="itemCode" tabindex="1" /> </td>
                                        <td><input name="itemDesc[]" value="" class="tInput" id="itemDesc"  readonly="readonly" /></td>
                                        <td><input name="itemQty[]" value="" class="tInput" id="itemQty" tabindex="2"/></td>
                                        <td><input name="itemPrice[]" value="" class="tInput" id="itemPrice" readonly="readonly" /> </td>

                                    </tr>
                                </tbody>
                            </table>
                           <a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Добави ред</span></a> 
                           <div style="float: right; width: 100px;">
                           <div id="container">Общо: <span style="clear:both;" id="added"></span><br></div>
                    </div>

And jquery

    $('input').keyup(function(){ // run anytime the value changes

     var firstValue = parseFloat($('#itemQty').val()); // get value of field
     var secondValue = parseFloat($('#itemPrice').val()); //
     $('#added').html(firstValue * secondValue); // add them and output it
      });

The problem is that that script calculate only the first row.

Answer 1

You have repeated IDs in your webpage. And whenever you will use repeated IDs it will always treated for the first Element. So, you have to make dynamic ids for this purpose:

Making HTML with PHP:

<table id="itemsTable" class="general-table">
    <thead>
        <tr>
            <th></th>
            <th>Код на продукт</th>
            <th>Описание</th>
            <th>Брой</th>
            <th>Цена</th>
        </tr>
    </thead>
    <tbody>
    <?php
        foreach( $yourArray as $key=>$item){}
    ?>
        <tr class="item-row">
            <td></td>
            <td><input name="itemCode[]" value="" class="tInput" id="itemCode_<?php echo $key;?>" tabindex="1" /> </td>
            <td><input name="itemDesc[]" value="" class="tInput" id="itemDesc_<?php echo $key;?>"  readonly="readonly" /></td>
            <td><input name="itemQty[]" value="" class="tInput" id="itemQty_<?php echo $key;?>" tabindex="2"/></td>
            <td><input name="itemPrice[]" value="" class="tInput" id="itemPrice_<?php echo $key;?>" readonly="readonly" /> </td>
        </tr>
    <?php
        }
    ?>
    </tbody>
    </table>
       <a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Добави ред</span></a> 
       <div style="float: right; width: 100px;">
       <div id="container">Общо: <span style="clear:both;" id="added"></span><br></div>
</div>

Javascirpt/JQuery:

$(document).ready(function(){

  $('input').keyup(function(){ // run anytime the value changes
    // getting parent TR of current Input
    var parent_tr = $(this).closest('tr');

    //gettting parent TR's child input named as 'itemQty[]'
    var firstValue = parseFloat($("input[name='itemQty[]']", parent_tr).val()); // get value of field

    //gettting parent TR's child input named as 'itemPrice[]'
    var secondValue = parseFloat($("input[name='itemPrice[]']", parent_tr).val()); //

    $('#added').html(firstValue * secondValue); // add them and output it
    });

});

Demo will Static HTML 2 rows: http://jsfiddle.net/Lvjff4ga/

Answer 2

$('input','#itemsTable').change(function(){
    var tot = 0;
    $('tbody tr','#itemsTable').each(function(){
       tot += $('[name=itemQty\[\]]', this).val() * $('[name=itemPrice\[\]]', this).val();
    });//each
    $('#added').html(tot);
});