Problems with calculating total price in cart

I'm trying to calculate the total price of my cart. It works when I only select the same product but when I chose another product it just multiplies the number of clicks to the total price. How can I rewrite this so it doesn't multiply the amount of clicks? GIF of my problem: https://gyazo.com/c273f1d8a3caa3cded6debef52cfadaf

const shopContainer = document.querySelector(".shop-content");

let productTitle;
let productDescription;
let productImage;
let productPrice;
let productCategory;
let productId;
let productKey = [];
let productArray = [];

let output = "";

const url = "https://fakestoreapi.com/products";

let data = fetch(url)
  .then((res) => res.json())
  .then((data) => {
    for (let i = 0; i < data.length; i++) {
      productTitle = data[i].title;
      productDescription = data[i].description;
      productImage = data[i].image;
      productPrice = data[i].price;
      productCategory = data[i].category;
      productId = data[i].id;
      productArray[i] = [
        productTitle,
        productDescription,
        productImage,
        productPrice,
        productCategory,
        productId,
      ];
      productKey[i] = data[i].id;
      localStorage.setItem(productKey[i], JSON.stringify(productArray[i]));
    }
    showApi();
  })
  .catch((error) => {
    console.error("Error message:", error);
  });

function showApi() {
  for (let i = 0; i < productArray.length; i++) {
    productId = productArray[i][5];
    output += `
              <div class="product-box">
              <img class="product" src="${productArray[i][2]}" alt="product image">
              <h2 class="product-title">${productArray[i][0]}</h2>
                  <div class="bottom-box">
                  <span class="price">${productArray[i][3]}$</span>
                  <i class='bx bx-shopping-bag add-cart' "data-id="${productId}" onclick="returnKey(${productArray[i][5]})"></i>
                  </div>
                </div>
          `;
  }
  shopContainer.innerHTML = output;
}


let inputCart = document.querySelector(".inputCart");

function returnKey(clickedId) {
  cart.classList.add("active");
  console.log(clickedId);

  if (localStorage.length !== 0) {
    let sum = 0;
    Object.keys(localStorage).forEach(function (key) {
      productObject = JSON.parse(localStorage.getItem(key));
      completeProduct = productObject;
      sum += completeProduct[3];
      if (completeProduct[5] == clickedId) {
        let cartPrice = document.createElement("p");
        let cartTitle = document.createElement("p");
        let cartImage = document.createElement("img");

        inputCart.appendChild(cartPrice);
        inputCart.appendChild(cartImage);
        inputCart.appendChild(cartTitle);

        cartPrice.setAttribute("class", "cart-price")
        cartTitle.setAttribute("class", "cart-title");
        cartImage.setAttribute("src", completeProduct[2]);
        cartImage.setAttribute("width", "75");
        cartImage.setAttribute("height", "75");

        cartTitle.innerHTML = completeProduct[0];
        cartPrice.innerHTML = "$" + completeProduct[3];

        console.log(cartPrice);
        console.log(cartTitle);
        document.getElementById('priceTotal').innerHTML = "Total: " + sum + "$";
        console.log(sum)
      }
    })
  }
};

// function totalSum(cartPrice) {
//   sum = 0;
//   cartPrice = document.querySelectorAll(".cart-price");
//   for (let i = 0; i < cartPrice.length; i++) {
//     sum = sum + completeProduct[3];
//     console.log("Product price " + sum);
//     document.getElementById('priceTotal').innerHTML = "Total: " + sum + "$";
//   }
// }

let removeBtn = document.getElementById("removeBtn").addEventListener("click", clearCart);
let buyBtn = document.getElementById("buyBtn").addEventListener("click", buyCart);

function clearCart() {
  removeCart = window.confirm("Are you sure you want to clear your cart?");
  if (removeCart) {
    inputCart.innerHTML = "";
    document.getElementById('priceTotal').innerHTML = "Total: " + "0" + "$";;
    console.clear();
  }
};

function buyCart() {
  shopMore = window.confirm("Do you want to checkout?");
  if (shopMore) {
    alert("Thank your for shopping at CatchShop!");
    window.location.reload();
  }
};

let cartIcon = document.querySelector("#cart-icon");
let cart = document.querySelector(".cart");
let closeCart = document.querySelector("#close-cart");

cartIcon.onclick = () => {
  cart.classList.add("active");
};

closeCart.onclick = () => {
  cart.classList.remove("active");
};

Thanks in advance! :)

Solution

You are calling the totalSum() function for every item. And sum always gets "reset" to 0. Try to add let sum = 0 before this line Object.keys(localStorage).forEach(function (key) {

function totalSum() {
  cartPrice = document.querySelectorAll(".cart-price");
  let sum = 0; // Everytime this function gets called, sum gets reset
  for (let i = 0; i < cartPrice.length; i++) {
    sum = sum + completeProduct[3];
    console.log(sum);
    document.getElementById('priceTotal').innerHTML = "Total: " + sum + "$";
  }
}

Solution:

let inputCart = document.querySelector(".inputCart");

function returnKey(clickedId) {
  cart.classList.add("active");
  console.log(clickedId);

  if (localStorage.length !== 0) {
    let sum = 0;
    Object.keys(localStorage).forEach(function (key) {
      productObject = JSON.parse(localStorage.getItem(key));
      completeProduct = productObject;

      if (completeProduct[5] == clickedId) {
        let cartPrice = document.createElement("p");
        let cartTitle = document.createElement("p");
        let cartImage = document.createElement("img");

        inputCart.appendChild(cartPrice);
        inputCart.appendChild(cartImage);
        inputCart.appendChild(cartTitle);

        cartPrice.setAttribute("class", "cart-price")
        cartTitle.setAttribute("class", "cart-title");
        cartImage.setAttribute("src", completeProduct[2]);
        cartImage.setAttribute("width", "75");
        cartImage.setAttribute("height", "75");

        cartTitle.innerHTML = completeProduct[0];
        cartPrice.innerHTML = "$" + completeProduct[3];

        console.log(cartPrice);
        console.log(cartTitle);
        totalSum(sum);
      }
    })
  }
};

function totalSum(sum) {
  cartPrice = document.querySelectorAll(".cart-price");
  for (let i = 0; i < cartPrice.length; i++) {
    sum = sum + completeProduct[3];
    console.log(sum);
    document.getElementById('priceTotal').innerHTML = "Total: " + sum + "$";
  }
}

Edit Solution:

You don't even need the totalSum function. You can simply increase the value of the sum variable with the current price of the local storage object you are iterating.

let inputCart = document.querySelector(".inputCart");

function returnKey(clickedId) {
  cart.classList.add("active");
  console.log(clickedId);

  if (localStorage.length !== 0) {
    let sum = 0;
    Object.keys(localStorage).forEach(function (key) {
      productObject = JSON.parse(localStorage.getItem(key));
      completeProduct = productObject;
      sum += completeProduct[3];
      if (completeProduct[5] == clickedId) {
        let cartPrice = document.createElement("p");
        let cartTitle = document.createElement("p");
        let cartImage = document.createElement("img");

        inputCart.appendChild(cartPrice);
        inputCart.appendChild(cartImage);
        inputCart.appendChild(cartTitle);

        cartPrice.setAttribute("class", "cart-price")
        cartTitle.setAttribute("class", "cart-title");
        cartImage.setAttribute("src", completeProduct[2]);
        cartImage.setAttribute("width", "75");
        cartImage.setAttribute("height", "75");

        cartTitle.innerHTML = completeProduct[0];
        cartPrice.innerHTML = "$" + completeProduct[3];

        console.log(cartPrice);
        console.log(cartTitle);
        document.getElementById('priceTotal').innerHTML = "Total: " + sum + "$";
      }
    })
  }
};

Edit:

function returnKey(clickedId) {
  cart.classList.add("active");
  console.log(clickedId);

  if (localStorage.length !== 0) {
    Object.keys(localStorage).forEach(function (key) {
      productObject = JSON.parse(localStorage.getItem(key));
      completeProduct = productObject;
      if (completeProduct[5] == clickedId) {
        let cartPrice = document.createElement("p");
        let cartTitle = document.createElement("p");
        let cartImage = document.createElement("img");

        inputCart.appendChild(cartPrice);
        inputCart.appendChild(cartImage);
        inputCart.appendChild(cartTitle);

        cartPrice.setAttribute("class", "cart-price")
        cartTitle.setAttribute("class", "cart-title");
        cartImage.setAttribute("src", completeProduct[2]);
        cartImage.setAttribute("width", "75");
        cartImage.setAttribute("height", "75");

        cartTitle.innerHTML = completeProduct[0];
        cartPrice.innerHTML = "$" + completeProduct[3];

        console.log(cartPrice);
        console.log(cartTitle);
        let cartElements = document.getElementsByClassName('cart-price');
        let sum = 0;

        for (let i = 0; i < cartElements.length; ++i) {
            let item = cartElements[i];  
            let price = item.innerText;
            // Get rid of the $ sign and convert it to int
            sum += parseInt(price.slice(1)); 
         }
         let inputCart = document.querySelector(".inputCart");
        document.getElementById('priceTotal').innerHTML = "Total: " + sum + "$";
      }
    })
  }
};