Как реализовать добавление товара, чтобы увеличивался id и price, а не создавался такой же товар?

const productsBtn = document.querySelectorAll('.item-incr-button')
const cardProductsList = document.querySelector('.modal-content')
const removeProductBtn = document.querySelectorAll('.item-decr-button')

const randomId = () => {
    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
}

const getCartProduct = (img, title, counter, price, id) => {
    return `
        <div class="modal-content-item" data-id="${id}">
            <div class="content-item-photo">
                <img src="${img}" alt="">
            </div>
            <div class="content-item-label">
                <div class="content-item-title">    
                    ${title}
                    <span class="content-item-counter">
                        <span class="counter">${counter}</span>
                            x
                    </span>
                </div>
            </div>
            <div class="content-item-price">
                ${price} $
            </div>
        </div>    
    `
}


productsBtn.forEach((el) => {
    el.closest('.page-item').setAttribute('data-id', randomId())
    el.addEventListener("click", (e) => {
        let self = e.currentTarget
        let parent = self.closest('.page-item')
        let id = parent.dataset.id
        let counter = parent.querySelector('.item-counter')
        console.log(counter)
        let img = parent.querySelector('.item-photo img').getAttribute('src')
        let title = parent.querySelector('.item-title').textContent
        let priceNumber = parseFloat(parent.querySelector('.item-price').textContent)
        cardProductsList.querySelector('.modal-content-items').insertAdjacentHTML('afterbegin', getCartProduct(img, title, counter, priceNumber, id)) 
    })
})

          <div class="page-item">
              <div class="item-counter" id="btn_11"></div>
              <div class="item-photo">
                  <picture class="item-lottie">
                      <img src="src/image/Burger_148.png" alt="">
                      <source type="application/x-tgsticker" srcset="src/image/Burger_148.png">
                      <canvas width="74" height="74"></canvas>
                  </picture>
              </div>
              <div class="item-label">
                  <span class="item-title">
                      Burger
                  </span>
                  <span class="item-price">
                      $4.99
                  </span>
              </div>
              <div class="item-buttons">
                  <button class="item-decr-button" data-btn-id="#btn_11">

                  </button>
                  <button class="item-incr-button" data-btn-id="#btn_11" data-btn-add="#btn_11">
                      <span class="button-item-label">Add</span>
                  </button>
              </div>
          </div>


<div class="modal-container"> //корзина
        <div class="modal-content">
            <div class="modal-header">
                <div class="header-wrap">
                    <h2 class="header-wrap-title">Your order</h2>
                    <span>Edit</span>
                </div>
            </div>
            <div class="modal-content-items">
                
            </div>
        </div>
    </div>