Вот рабочий JSfIddle , основанный на вашем коде.
Вот еще один JSFiddle лучшего подхода , с меньшим, более чистым и простым кодом - описание ниже .
Проблема в том, что в последнем разделе JS, где вы суммируете final общее количество тележек:
$('tr').each(function(){
// ...
Вы используете селектор $('.artprice'). Но их несколько, и этот селектор будет соответствовать всем им. Возможно, вы ожидали, что $('.artprice').val() на самом деле даст вам все значения или сумму, но это не так, просто вы получите значение самого первого значения на странице.
Та же проблема для $('.fname').val() - она просто даст вам значение первого, а не всего, а не суммы.
Так что вам нужно применить тот же тип логики обхода c к этому последнему разделу суммирования, как вы делали в первом разделе, вычисляя цену измененной строки:
// Use .cartoon so we only match product rows, not the cart-total row
$('tr.cartoon').each(function(){
$row = $(this);
price = parseFloat($row.find('.artprice').val());
quantity = parseFloat($row.find('.fname').val());
total = total + price * quantity;
console.log('price', price, 'quantity', quantity, 'total', total);
});
$('.final strong').text(total + '$');
Но , если вы сделаете шаг назад, эта final cart- Итоговая секция фактически делает то же самое, что и секция, которая вычисляет цену для измененной строки. Он рассчитывает цену для каждой строки и суммирует их для итоговой суммы. Таким образом, вы можете удалить первую часть и просто использовать второй финал l oop, чтобы сделать все. Второй JSFiddle , который я связал выше, делает это.