Как я могу изменить код, чтобы при повторном нажатии на товар в корзину добавлялся еще один

Question

вместо создания новой строки, как увеличить количество одного и того же элемента? В настоящий момент я не могу добавить ту же статью с такой же заправкой в ​​корзину, потому что внутри функции addItemtoCart я объявил, что проверяет ее внутреннее значение. Text

я должен получить новую строку, только если 'dressing' - разные.

   var input = event.target
   if (isNaN(input.value) || input.value <= 0) {
       input.value = 1
   }
   updateCartTotal()
}

function addToCartClicked(event) {
   var button = event.target
   var shopItem = button.parentElement.parentElement.parentElement
   var title = shopItem.getElementsByClassName('product_description_h1')[0].innerText
   var price = shopItem.getElementsByClassName('product_price_button_price-2')[0].innerText
   var imageSrc = shopItem.getElementsByClassName('product_image')[0].src
   var dressing = shopItem.getElementsByClassName('dressing_tab')[0].value
   var id = shopItem.dataset.itemId
   addItemToCart(title, price, imageSrc, dressing, id)
   updateCartTotal()
}

function addItemToCart(title, price, imageSrc, dressing, id) {
   var cartRow = document.createElement('div')
   cartRow.classList.add('cart_item')
   cartRow.dataset.itemId = id
   var cartItems = document.getElementsByClassName('cart_list')[0]
   //stop duplicate items in the cart
   //get the title of the same class being called
   var cartItemNames = cartItems.getElementsByClassName('dressing')
   //loop through the names
   for (var i = 0; i < cartItemNames.length; i++) {
       //check if the names in the cart equal to the title I am adding
       if (cartItemNames[i].innerText == dressing) {
           return;
       }
       console.log(cartItemNames)
   }
   // row gets created
   var cartRowContents = 
   `<img src="${imageSrc}" alt="" class="cart_item_image"/>
       <div class="cart_item_description">
           <div class="text-block-14">${title}</div>
           <div class="cart-price">${price}</div>
           <div class="dressing">${dressing}</div>
           <button class="remove_button w-button" type="button">Remove</button>
       </div>
       <input class="cart_quantity" type="number" value="1">`
   cartRow.innerHTML = cartRowContents
   cartItems.append(cartRow)
   cartRow.getElementsByClassName('remove_button')[0].addEventListener('click', removeCartItem)
   cartRow.getElementsByClassName('cart_quantity')[0].addEventListener('change', quantityChanged)
}

function updateCartTotal() {
   var cartItemContainer = document.getElementsByClassName('cart_list')[0]
   var cartRows = cartItemContainer.getElementsByClassName('cart_item')
   var total = 0
   for (var i = 0; i < cartRows.length; i++) {
       var cartRow = cartRows[i]
       var priceElement = cartRow.getElementsByClassName('cart-price')[0]
       var quantityElement = cartRow.getElementsByClassName('cart_quantity')[0]
       var price = parseFloat(priceElement.innerText.replace('$', ''))
       var quantity = quantityElement.value
       total = total + (price * quantity)
   }
   total = Math.round(total * 100) / 100
   document.getElementsByClassName('zahl')[0].innerText = '$' + total
} ```

hope i could make the point clear.

a working example :https://streamable.com/j8abi6