Why don't the numbers add up?

Question

JavaScript

There is a code that, when clicked, should go through the goods in the basket and calculate their cost

$('.add-item').click(function () {
    var price = $(this).parent().find('.price').text();
    $('.cart-window ul').append($('<div class="item">123 <span>'+price+'</span></div>'));
    var sum = 0; //начальная сумма корзины
    $('.cart-window ul').each(function () { // проходимся по товарам
      var price_item = $(this).find('.item span').text(); //узнаём цену товара
      console.log(typeof(sum)); // для отладки
      console.log(typeof(price_item)); // для отладки
      price_item = parseInt(price_item); //переводим строку в число
      console.log(typeof(price_item)); // для отладки
      sum += price_item; //считываем сумму товаров
      console.log(sum);  // для отладки
    });
    $('.cart-window .amount').text(sum); //выводим сумму заказа
  });

I can’t understand why they don’t add up normally, sum is the number price_item is also distilled into a number,
and the sum is as if after adding the rows
Screen from the console

Answer 1

Replace with and replace with . And now, instead of iterating over .items, you process the entire list at once, getting the contents of all .item spans at once - naturally, the lines are glued together. $('.cart-window ul').each$('.cart-window ul .item').each$(this).find('.item span').text()$(this).find('span').text()