مشكلة في كود JavaScript

let carts=document.querySelectorAll('.add-cart');

let products = [
    {

        name: 'هدية 1',
        tag:'هدية 1 ',
        price: 100,
        inCart:0
    },
    {
        name: 'هدية 2',
        tag:'هدية 2 ' ,
        price: 200,
        inCart:0
    },
    {
        name: 'مزهرية 1',
        tag:'مزهرية 1 ' ,
        price: 100,
        inCart:0
    },
    {

        name: 'هدية 3',
        tag:'هدية 3 ' ,
        price: 250,
        inCart:0
    }
];
for (let i=0; i<carts.length;i++){
    carts[i].addEventListener('click',()=>{
        cartNumbers(products[i]);
         total(products[i])
        })
}
function onloadCartNumbers(){
     let productNumbers=localStorage.getItem('cartNumbers');
if(productNumbers) {

    document.querySelector('.cart').textContent = productNumbers ;
    }
}

function cartNumbers(product) {
    let productNumbers=localStorage.getItem('cartNumbers');
productNumbers=parseInt(productNumbers);

if(productNumbers){
   localStorage.setItem('cartNumbers',productNumbers + 1);
     document.querySelector('.cart').textContent=productNumbers + 1;

}else{
  localStorage.setItem('cartNumbers',1);
  document.querySelector('.cart').textContent=1;
}
setItems(product);

}
function setItems(product){
    let  cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);

    if(cartItems != null){
        if(cartItems[product.tag] == undefined) {
            cartItems ={
               ... cartItems,
                [product.tag]:product
            }
        }
        cartItems[product.tag].inCart += 1;
    } else {
        product.inCart = 1;
    cartItems ={
        [product.tag]: product
       }
    }

    localStorage.setItem("product.inCart", JSON.stringify(cartItems));
}

function total(product){
  let cartCost = localStorage.getItem('total')  ;
  console.log("My cartcost is", cartCost );
  console.log(typeof cartCost );

  if(cartCost != null){
      cartCost = parseInt(cartCost);
      localStorage.setItem("total",cartCost + product.price);
  } else {
            localStorage.setItem("total", product.price);
  }
}

function displayCart(){
    let cartItems = localStorage.getItem("productsInCart");
    cartItems = JSON.parse(cartItems);
    let productContainer = document.querySelector(".products");
    let cartCost = document.querySelector('total');

    console.log(cartItems);
    if (cartItems && productContainer) {
        productContainer.innerHTML = '';
        Object.values(cartItems).map(item => { productContainer.innerHTML +=
                <div class="products">
                    <img src="image/remove.png">
                    <img src="image/${item.tag}.png">
                </div>
            <div class="price">${item.price}</div>
            <div class="quantity">
               <img src="image/plus.png">
                   <span>${item.inCart}</span>
                   <img src="image/mins.png">
            </div>
            <div class="price-total">
                ${item.price * item.inCart}
            </div>
                 ;

 });
            productContainer.innerHTML +='
            <div class="bask">
                <h4 class="baskTitle">
                    baskTitle
                </h4>
                <h4 class="baskTotal">
                    ${cartCost}

                </h4>

             ';
        }
        }

       onloadCartNumbers();
       displayCart();