Я пытаюсь получить общую цену * количество. Ввод от различных предметов и продуктов. Как утешить только измененный массив?

Question

Мне нужна помощь:
Моя функция для расчета цены * Количество. Ввод работает хорошо, но просто изменяет сумму (id = "1") с первого элемента.
Что я должен изменить в своем код для получения суммы в каждом элементе, для которого я изменяю ввод?
Если я изменяю (ввод) из номера элемента 3 и console.log, я получаю [0.89, 1, 4] массив с каждым элементом и итогом в "id:" 1 "не изменяется,
, и если я изменяю первый элемент, общая сумма в" id = "1" изменяется.

<!-- begin snippet: js hide: false console: true babel: false-->

<!-- language: lang-js -->
<script>
         $('.quantity').on('change', getTotals);
           function getTotals() {
           var totals = $('.quantity').map(function() {
           var $tr = $(this).closest('tr');
           return parseFloat($tr.find('.priceCell').text()) *                     parseInt($(this).val(), 10);
            }).get();
           console.log(totals)
           document.getElementById('1').innerText = '€' +                           parseFloat(totals).toFixed(2)  
             }
</script>

<!-- language: lang-html -->
<% items.roupa.forEach(function(item){ %>
  <div class="T-shirts selectt">
    div class="shop-item" data-item-id= "<%= item.id %>" >
    <img class="shop-item-image" src="/resources/images/tshirt/<%= item.imgName %>">
     <div class="shop-item-details">
      <table>
       <span class="shop-item-title"><%= item.name %></span>
        <table>
         <tr>
          <td class="priceCell"><%= item.price / 100 %> </td>
          <td><input type="number" class="form-control3 text-center quantity" min="1" max="999" value="1"></td>
         </tr>
        <button class="btn btn-primary shop-item-button" class="buttonadd" type="button">To Cart </button>
       <span class="shop-item-price1" id="1"><%= item.price2 / 100 + '€' %></span>
      </table>
      </div>
     </div>
    </div>
  <% }) %>
<!-- end snippet -->