title: LocalStorage updating element causes duplication with JSON in JQuery
body: <p>So I'm trying to update an element in LocalStorage with JSON but I can't figure out what I am doing so wrong. I want to add a product and let its quantity be updated upon adding the same product again.</p>
  
  <p>The first time I add X product, I get the correct quantity in one element. Upon adding another X, the quantity changes to null. Adding an entirely new product Y, will cause multiple duplicate Y elements with all null quantities.</p>
  
  <p>There has to be some logical error that I just cannot seem to figure out. The addToCart function is where I suspect that things are going wrong. Any help is greatly appreciated as I am new to JavaScript and JQuery. Thank you.</p>
  
  <pre><code>$(document).ready(function() {
    // caching
    let $table = $(".shoe-table");
  
    fetch("shoes.json")
      .then(resp =&gt; resp.json())
      .then(data =&gt; {
        let shoes = data.shoes;
        let rows = [1, 2, 3];
        let shoeCard = "";
        let products = JSON.parse(localStorage.products || "[]");
        console.log(products);
  
        function addToCart(cBtn) {
          let clickedButton = $(cBtn);
          let buttonID = clickedButton.attr("id");
          let thisInput = $("#" + clickedButton.attr("id") + ".input-form").children("input");
          let newShoe = {
            id: buttonID,
            image: shoes[buttonID].image,
            name: shoes[buttonID].name,
            price: shoes[buttonID].price,
            quantity: parseInt(thisInput.val())
          };
  
          if (products.length != 0) {
            products.forEach(shoe =&gt; {
              if (shoe.name == newShoe.name) {
                shoe.quantity += newShoe.quantity;
                localStorage.setItem("products", JSON.stringify(products));
                console.log(products);
              } else {
                products.push(newShoe);
                localStorage.setItem("products", JSON.stringify(products));
              }
            });
          } else {
            products.push(newShoe);
            localStorage.setItem("products", JSON.stringify(products));
          }
        }
  
        let counter = 0;
        rows.forEach(row =&gt; {
          shoeCard += "&lt;tr&gt;";
          for (let index = 0; index &lt; 4; index++) {
            shoeCard +=
              "&lt;td class='card text-center'&gt;" +
              "&lt;img class='card-img-top' src=" +
              shoes[counter].image +
              " alt='Card image cap'&gt;" +
              "&lt;h5 class='card-title'&gt;" +
              shoes[counter].name +
              "&lt;/h5&gt;" +
              "&lt;p class='card-text'&gt;kr " +
              shoes[counter].price +
              "&lt;/p&gt;" +
              "&lt;button id=" +
              counter +
              " class='orderNow btn btn-outline-dark'&gt;ORDER NOW&lt;/button&gt;" +
              "&lt;div id=" +
              counter +
              " class='input-form'&gt;&lt;input class='qty-chooser' type='number' placeholder='Choose quantity' min=0 max=10&gt;" +
              "&lt;button class='btn-add-to-cart' disabled='disabled'&gt;ADD TO CART&lt;/button&gt;" +
              "&lt;/div&gt;" +
              "&lt;/td&gt;";
            counter++;
          }
  
          shoeCard += "&lt;/tr&gt;";
        });
  
        $table.append(shoeCard);
        let $inputForm = $(".input-form");
        let $orderBtn = $(".orderNow");
  
        $inputForm.hide();
  
        let activeButton = -1;
  
        // Denna metod tittar om man redan har en aktiv beställning
        function isProductActive() {
          let btnID = $(this).attr("id");
          if (activeButton == -1) {
            activeButton = btnID;
            toggleOrder($(this));
          } else if (btnID != activeButton) {
            toggleOrder($("#" + activeButton + ".orderNow"));
            toggleOrder($(this));
            activeButton = btnID;
          } else if (btnID == activeButton) {
            toggleOrder($(this));
            activeButton = -1;
          }
        }
  
        $orderBtn.click(isProductActive);
  
        function toggleOrder(buttonC) {
          console.log("INSIDE TOGGLE");
          let clickedBtn = $(buttonC);
          let thisInputForm = $("#" + clickedBtn.attr("id") + ".input-form");
  
          let inputBtn = thisInputForm.children("button");
          let inputIn = thisInputForm.children("input");
  
          // RESETTAR ELEMENT I .input-form
          function resetInputForm() {
            inputBtn.css("background", "");
            inputBtn.css("color", "");
            inputBtn.attr("disabled", "disabled");
            inputIn.val(null);
          }
  
          // DENNA KNAPP ÄR EN ADD TO CART FUNKTION
          inputBtn.click(function() {
            // TODO: LÄGG TILL LOGIK FÖR ATT LÄGGA TILL VARUKORG
            console.log("INSIDE ADDING");
  
            addToCart(clickedBtn);
            thisInputForm.hide("slow");
            clickedBtn.text("ORDER NOW");
            clickedBtn.css("background", "");
            resetInputForm();
            activeButton = -1;
          });
          // BEROENDE PÅ QUANTITY REAGERAR ADD TO CART KNAPPEN
          inputIn.change(function() {
            let qty = inputIn.val();
  
            if (qty &gt;= 1 &amp;&amp; qty &lt;= 10) {
              inputBtn.removeAttr("disabled");
              inputBtn.css("background", "rgb(15, 163, 10)");
              inputBtn.css("color", "white");
            } else if (qty &lt; 1) {
              resetInputForm();
            } else if (qty &gt; 10) {
              inputIn.val(10);
            }
          });
  
          // KONTROLLERAR ORDER NOW KNAPPEN
          if (clickedBtn.text() == "CANCEL") {
            thisInputForm.hide("slow");
            clickedBtn.text("ORDER NOW");
            clickedBtn.css("background", "");
            resetInputForm();
          } else {
            thisInputForm.show("slow");
            clickedBtn.text("CANCEL");
            clickedBtn.css("background", "red");
            inputBtn.attr("disabled", "disabled");
            resetInputForm();
          }
        }
      })
      .catch(err =&gt; console.error(err));
  });
  </code></pre>