Как увеличить количество товара в корзине

Question

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

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

function quantityChanged(event) {
    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
}

надеюсь, что смогу прояснить суть.

рабочий пример: https://streamable.com/j8abi6