[laimas]

а по поводу кнопки как лучше сделать?

Объясняю/предлагаю/советую последний раз.

<style>
.product__add-to-cart-button {
    padding: 10px 20px;
    border: none;
    background-color: #6FBBFC;
}

.product__add-to-cart-button span:after {
    content: 'Добавить в корзину';
}

.product__add-to-cart-button.button-active {
    background-color: #FE6C6C;
}

.product__add-to-cart-button.button-active span:after {
    content: 'Удалить из корзины';
}
</style>

<button class="product__add-to-cart-button" 
        data-sb-id-or-vendor-code="0032pz" 
        data-sb-product-size="32" 
        data-sb-product-name="Пицца «Ветчина и грибы»" 
        data-sb-product-price="320" 
        data-sb-product-quantity="1" 
        data-sb-product-img="smartbasket/img/pizza.png">
    <i class="fas fa-cart-plus"></i> <span></span>
</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('button.product__add-to-cart-button').click(function() {
    var bt = $(this), id = bt.data('sb-id-or-vendor-code');
    if(bt.hasClass('button-active')) {
        //удаление товара с ID из корзины
        //и цикла для этого не требуется 
        console.log('del '+id)
    } else {
        //добавление товара с ID в корзину
        //и цикла для этого не требуется
        console.log('add '+id)     
    }
    
    bt.toggleClass('button-active'); //изменение состояния кнопки 
});
</script>

* атрибуты кнопки в столбик, это тут для компактности, на реальной странице мусорить табуляций и переводами не стоит.

Также посредством CSS можно описать и смену иконки кнопки. А количеством товара в корзине должно заниматься поле, например типа number.

А при загрузке страницы в цикле товаров корзины выполнять

$('button[data-sb-id-or-vendor-code="'+id+'"]').addClass('button-active'); //где id идентификатор товара