从localStorage升级数据

Question

当我第一次单击我的商品时，它们的详细信息（例如名称，价格和金额）存储在本地存储中，然后使用存储的详细信息创建一个元素。

其他时候单击我的项目时，它们的数量会在本地存储中增加，但是此数量未正确显示在元素中，并且对于所有这些元素，数量都会显示在第一个元素onlz上

let x = 0;
(function() {
  items.forEach(function(btn) {
    btn.addEventListener('click', function(event) {
      // console.log(event.target)
      let names = localStorage.getItem('name');
      const exists = !!names;
      names = exists ? JSON.parse(names) : [];
      let prices = exists ? JSON.parse(localStorage.getItem('price')) : [];
      let numbers = exists ? JSON.parse(localStorage.getItem('number')) : [];
      let imgs = exists ? JSON.parse(localStorage.getItem('imgs')) : [];
      var name =
        event.target.parentElement.parentElement.parentElement.parentElement.children[1].children[0].textContent;
      const nI = names.indexOf(name);
      if (nI === -1) {
        var img =
          event.target.parentElement.parentElement.parentElement.children[0].src;
        var pos = img.indexOf('imgs') - 1;
        var img = img.slice(pos);
        imgs.push(img);
        localStorage.setItem('imgs', JSON.stringify(imgs));
        names.push(name);
        localStorage.setItem('name', JSON.stringify(names));
        var price =
          event.target.parentElement.parentElement.parentElement.parentElement.children[1].children[2].textContent;
        var price = parseInt(price);
        prices.push(price);
        localStorage.setItem('price', JSON.stringify(prices));
        numbers.push(1);

        var creatElement = document.createElement('div');
        creatElement.classList.add('items-in-card');
        creatElement.innerHTML = `
                    <div style="flex-grow: 4;">
                        <img src="${imgs[x]}" style="border-radius: 40%;" title="${names[x]}">
                    </div>
                    <div style="flex-grow: 2;font-size: 25px;">${prices[x]} $</div>
                    <i class="fas fa-minus"></i><span class="xx" style="flex-grow: 2; font-size: 20px;">${numbers[x]}</span><i class="fas fa-plus"></i>
                    <div class="delete-item" style="flex-grow: 2;"><i class="fas fa-trash"></i></div>
                `;
        const shopBox = document.getElementById('my-items');
        const total = document.querySelector('.total');
        shopBox.insertBefore(creatElement, total);
        x++;
      } else {
        numbers[nI]++;
        document.querySelector('.xx').textContent = numbers[nI];
      }
      localStorage.setItem('number', JSON.stringify(numbers));
    });
  });
})();