Требуется суммировать значения элементов с одинакыми классами, как?

Question

AbaiS @AbaiS

JavaScript

Требуется суммировать значения элементов с одинакыми классами, как?

Нужно сложить цисловые данные из всех элементов с классом

basket__item-total_num

, но при попытке это сделать, числа просто склеиваются
Каждая карточка выглядит так:

<div class="basket__item">
                    <img src="img/boxes/image1.jpeg" alt="box" class="basket__item-image">
                    <div class="basket__item_wrapper">
                        <div class="basket__item-name">Коробка бурая + мелованная крышка</div>
                        <div class="basket__item-size">200*200*100</div>                       
                        <div class="basket__item-footer">
                            <div class="basket__item-price">Цена: 120</div>
                            <div class="basket__item-number">Кол-во: 10</div>
                        </div>
                        <hr>
                        <div class="basket__item-total_wrapper">
                            <div class="basket__item-total">Итого:</div>
                            <div class="basket__item-total_num"> 1200</div>
                        </div>
                    </div>
                </div>

Дело в том, что каждая такая карточка создается после нажатия кнопки, поэтому при создании каждой новой карточки сумма должна меняться.
Вот скрипт создания каточки:

const catalogItems = document.querySelectorAll('.catalog-item');
const basketList = document.querySelector('.basket__list');
    catalogItems.forEach((catalogItem, i) => {
        catalogItem.addEventListener('click', (e) => {
            if (e.target.classList.contains('catalog-item_image')) {
                const {img, name, size, price} = catalogItem.dataset,
                      basketItem = document.createElement('div');
                let number = document.querySelectorAll('.catalog-item_input')[i].value;

                const itemTotal = price * number;

                basketItem.innerHTML = `
                    <div class="basket__item">
                        <img src="${img}" alt="box" class="basket__item-image">
                        <div class="basket__item_wrapper">
                            <div class="basket__item-name">${name}</div>
                            <div class="basket__item-size">${size}мм</div>
                            <div class="basket__item-footer">
                                <div class="basket__item-price">Цена: ${price}сом</div>
                                <div class="basket__item-number">Кол-во: ${number}</div>
                            </div>
                            <hr>
                            <div class="basket__item-total_wrapper">
                                <div class="basket__item-total">Итого:</div>
                                <div class="basket__item-total_num">${itemTotal}</div>
                            </div>
                        </div>
                    </div>
                `;
                basketList.append(basketItem);

            basket.style.display = 'block';
            }
        });
    });