I was at the end of an e-commerce app project but the preferred way to handle it was switched to templates. So here's my question: I created each templates with each quantity to each product being added if needed smoothly, and I would like to calibrate the final calculation. I need to retrieve each quantity and each price, multiply these for each products, and finally sum each productPrices to a finalPrice. Also I would like to learn how can I handle input arrows and mix its use in the calculation. If any of you could help that'd be great. Please Help. Here's the code:

let cart = getCart();

const $itemTemplate = document.getElementById('itemTemplate');

const $cartItems = document.getElementById('cart__items');


for (let productKey in cart) {

    let product = cart[productKey];
    let $itemTemplateClone = document.importNode($itemTemplate.content, true);
    const $cartItem = $itemTemplateClone.querySelector('.cart__item');

    const $itemImg = $itemTemplateClone.querySelector('.itemImg');
    $itemImg.setAttribute('src', product.infos.imageUrl);
    $itemImg.setAttribute('alt', product.infos.altTxt);
    const $itemName = $itemTemplateClone.querySelector('.itemName');
    $itemName.textContent = product.infos.name;
    const $itemColor = $itemTemplateClone.querySelector('.itemColor');
    $itemColor.textContent = product.infos.color;
    const $itemPrice = $itemTemplateClone.querySelector('.itemPrice');
    $itemPrice.textContent = product.infos.price;
    const $itemQuantity = $itemTemplateClone.querySelector('.itemQuantity');
    $itemQuantity.setAttribute('value', product.quantity);

// the final calculation could go here in my opinion //

    const $selectQuantity = $itemTemplateClone.querySelector('.itemQuantity');
    $selectQuantity.addEventListener('change', (event) => {

// Don't know what to do next here to handle arrows, it lays in the quantity querySelector //

});