Question

The first input form always works but the second, third, forth and so on never do. What am I doing wrong?

Jquery

$('#cartUpdate').keyup(function() {

    var url = $(this).attr('action');   
    var qty = $('input[name=qty]').val();
    var rowid = $('input[name=rowid]').val();

    if(qty > 0) {
        $.post(url, {qty: qty, rowid: rowid }, function(changeCost) {       

        });
    }   

    return false;
});

Html:

<form action="cart/update" id='cartUpdate' method="post" accept-charset="utf-8">    
    <input type="hidden" name="rowid" value="76ea881ebe188f1a7e7451a9d7f17ada" />  
    <input type="text" name="qty" value="5"  />     
</form> 
<form action="cart/update" id='cartUpdate' method="post" accept-charset="utf-8">    
    <input type="hidden" name="rowid" value="e7a36fadf2410205f0768da1b61156d9" />
    <input type="text" name="qty" value="1"  />  
</form> 

Answer 1

You are using same Id in your both forms, that returns only the first element. You should use class i.e class=”cartUpdate” in your forms and $(‘.cartUpdate’) in the function or you can also use id=”cartUpdate1″, id=”cartUpdate2″ to your forms and can use $(‘#cartUpdate1, #cartUpdate2’).keyup(…);

Note: Use id for unique elements and class for a group of matched elements.

var qty = $('input[name=qty]', $(this)).val();
var rowid = $('input[name=rowid]', $(this)).val();

This should work.