jQuery: How to reference dynamic form elements and keep the previous elements working?

Question

I've done a lot of searching on this, so please forgive me if I've missed it, but this seems to be pretty unique.

I've got a table in a form that I need rows (and fields) to be dynamically added, and then I need jQuery to manipulate some of those fields, and then they must be passed off to PHP to be dumped into a MySQL database.

I've got everything working except the part where jQuery manipulates the fields. Basically what should happen is field 'unitprice' gets multiplied by field 'qty' and inserts the total in 'totalprice' field. Problem is, as I have to have these fields have different names so they'll all pass to PHP, jQuery will only operate on the first field (when I remove the + count in the math code), or the most recently added (when the + count is there).

Here is my jQuery code to add rows (note to make it look right on the page and have one row available to begin with, I had to have two blocks, one to append immediately, and one on click of the link:

     $(function(){
 $('#itemstablejquery').append(
 '<div class="jquery_items"><table id="jquery_items" width="100%" border="1" cellpadding="0" cellspacing="0"><tr><td width="10%">' 
 + '<input size="8" id="itemnum_' + count + '" name="itemnum[]' + '" type="text" /></td>'
 + '<td><input size="' + descwidth + '" id="description_' + count + '" name="description[]' + '" type="text" /></td>'
 + '<td width="5%"><input size="2" id="qty_' + count + '" name="qty[]' + '" type="text" /></td>'
 + '<td width="10%"><input size="' + unitpricewidth + '" id="unitprice_' + count + '" name="unitprice[]' + '" type="text" /></td>'
 + '<td width="11%"><input size="'+ totalpricewidth + '" id="totalprice_' + count + '" name="totalprice[]' + '" type="text" /></td>'
 + '</tr></table></div>'
 );

 });
 var count = 0;
 $(function(){
 $('p#add_field').click(function(){
 count += 1;
 $('#itemstablejquery').append(
 '<table id="jquery_items" width="100%" border="1" cellpadding="0" cellspacing="0"><tr><td width="10%">' 
 + '<input size="8" id="itemnum_' + count + '" name="itemnum[]' + '" type="text" /></td>'
 + '<td><input size="' + descwidth + '" id="description_' + count + '" name="description[]' + '" type="text" /></td>'
 + '<td width="5%"><input size="2" id="qty_' + count + '" name="qty[]' + '" type="text" /></td>'
 + '<td width="10%"><input size="' + unitpricewidth + '" id="unitprice_' + count + '" name="unitprice[]' + '" type="text" /></td>'
 + '<td width="11%"><input size="'+ totalpricewidth + '" id="totalprice_' + count + '" name="totalprice[]' + '" type="text" /></td>'
 + '</tr></table>'
 );

 });
 });

Here is the math jQuery:

$("table#jquery_items").live("click", function(){
$('#totalprice_' + count).css('color', 'red')
$('input').blur(function() {
var price = $('#unitprice_' + count).val() 
var quantity = $('#qty_' + count).val() 
var total = price * quantity;
if (!isNaN(total)) {
$('#totalprice_' + count).attr('value', total)
} else {
alert('Ops Error! Please only numbers')
}
})
});

And my HTML:

<div id="itemstablejquery"><a name="items" id="items"></a>
    </div>
    <p id="add_field"><a href="#items"><span>&raquo; Add another item...</span></a></p>

Thanks

Answer 1

On the .blur you are not supplying the value(meaning index, or count, or ID) of the field being blurred. So, js will simply use the last known value of the count variable.

I would suggest, if you want to use .blur, do something like:

$('input').blur(function() {
    var indexArr = $(this).attr('id').split('_');
    var price = $('#unitprice'+indexArr[1]).val();
    ....
});