how to avoid localStorage from rendering from the beginning

CODE

Here’s the code for a function which is triggered when a person clicks on “Add to Cart” button. It creates a row inside the cart using the data from localStorage about the items selected by the user from the menu.

function addItemToCart() {
  
  var cartRow = document.createElement("div");
  cartRow.classList.add("cart-row");
  var cartItems = document.getElementsByClassName("cart-items")[0]; //<div class="cart-items">
  var cartItemNames = cartItems.getElementsByClassName("cart-item-title");
  //Putting the data
  var locStore = JSON.parse(localStorage.getItem("selectedProduct"));
  var cartRowContents = locStore.map((item) => {
    return `
        <div class="cart-item cart-column">
            <img class="cart-item-image" src="${item.image}" width="100" height="100">
            <span class="cart-item-title">${item.title}</span>
            <span class="cart-item-size">"Rs.${item.sizePrice}"</span>
        </div>
        <span class="cart-price cart-column">${item.price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`;
  });
  cartRowContents = cartRowContents.join("");

  cartRow.innerHTML = cartRowContents;
  cartItems.append(cartRow);
  cartRow
    .getElementsByClassName("btn-danger")[0]
    .addEventListener("click", removeCartItem);
  cartRow
    .getElementsByClassName("cart-quantity-input")[0]
    .addEventListener("change", quantityChanged);
}

ISSUE

Whenever the user clicks on “Add TO cart”, the item is stored in localStorage.
Now, let’s say I have one item in my localStorage something like this:-

[{"productID":"1","image":"http://127.0.0.1:5500/Images/pizza.png","price":300,"title":"Tandoori Pizza","sizePrice":"100","quantity":1}]

Using the above data, I create a row in my Cart. Till here, it works completely fine.
Now, I add another item in my localStorage and now the localStorage looks something like this:-

[{"productID":"1","image":"http://127.0.0.1:5500/Images/pizza.png","price":300,"title":"Tandoori Pizza","sizePrice":"100","quantity":1},
{"productID":"2","image":"http://127.0.0.1:5500/Images/pizza.png","price":350,"title":"Veggie Supreme","sizePrice":"100","quantity":1}]"

Now, addItemToCart() is triggered again as we have selected another item. This time, it will show two items in a single row because it is also considering the first item in localStorage which actually has already been considered.
What should I do to avoid this problem?

OUTPUT – UI (CART)

Cart looks like this on UI. You can see that Tandoori Paneer is coming twice in the cart.

Answer

Something like this should do (note that I can’t test it without the whole context):

function addItemToCart(item) {
  
  var cartRow = document.createElement("div");
  cartRow.classList.add("cart-row");
  var cartItems = document.getElementsByClassName("cart-items")[0]; //<div class="cart-items">
  var cartItemNames = cartItems.getElementsByClassName("cart-item-title");
  //Putting the data
  var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="cart-item-image" src="${item.image}" width="100" height="100">
            <span class="cart-item-title">${item.title}</span>
            <span class="cart-item-size">"Rs.${item.sizePrice}"</span>
        </div>
        <span class="cart-price cart-column">${item.price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`;
  cartRowContents = cartRowContents.join("");

  cartRow.innerHTML = cartRowContents;
  cartItems.append(cartRow);
  cartRow
    .getElementsByClassName("btn-danger")[0]
    .addEventListener("click", removeCartItem);
  cartRow
    .getElementsByClassName("cart-quantity-input")[0]
    .addEventListener("change", quantityChanged);
}

/**
 * Render all the items in cart, 
 * call this instead of addItemToCart after an item was added to local storage.
 **/
function renderItemsInCart() {
  var cartItems = document.getElementsByClassName("cart-items")[0]; //<div class="cart-items">
  carItems.innerHTML = "";
  var locStore = JSON.parse(localStorage.getItem("selectedProduct"));
  var cartRowContents = locStore.map((item) => addItemToCart(item));
}