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

имеется условие

<div class="product__quantity"></div>
			<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 data-sb-id-button="0032pz">Добавить в корзину</span>
			</button>
		</div>

if (productsArr[sbId] !== undefined) {
					$('span[data-sb-id-button="'+sbId+'"]').text('Добавить в корзину');//Меняем текст
					$(this).addClass('button-active'); // добавляем цвет
				} else {
					$('span[data-sb-id-button="'+sbId+'"]').text('Удалить из корзины');//Меняем текст
					$(this).removeClass('button-active'); // удалить цвет
				}

алгоритм в коде такой, есть кнопка добавить в корзину она синяя,при нажатии на неё цвет меняется на красный и меняется цвет на удалить из корзины, но когда мы перезагружаем страницу, кнопка опять становится синяя и текст меняется на добавить из корзины.

Как сделать чтоб текст и кнопка не сбрасывались после перезагрузки страницы?

Вложение 4260

Определять наличие товара в корзине при выдаче страницы и определять цвет. Либо на клиенте при загрузке страницы делать такую проверку определяя цвет.

вот так прописываю

if (productsArr[sbId] !== undefined && getQuantity !== undefined) {
					$('span[data-sb-id-button="'+sbId+'"]').text('Добавить в корзину');//Меняем текст
					$(this).addClass('button-active'); // добавляем цвет
				} else {
					$('span[data-sb-id-button="'+sbId+'"]').text('Удалить из корзины');//Меняем текст
					$(this).removeClass('button-active'); // удалить цвет
				}

productsArr[sbId] - идентификатор товара
getQuantity - количество товара

после проверки, все равно сбрасываются настройки
может как то подругому надо прописать?

sty-wolf,
я не знаю структуру вашей корзины, и есть productsArr, это действительно она, а sbId это товар в ней (getQuantity это не понятно), то все будет работать:

var productsArr = {
    '23': {
        name: 'name',
        count: 2
    }
};

alert(productsArr[23] ? 1 : 0)
alert(productsArr[25] ? 1 : 0)

То есть не обязательно в данном случае проверять undefined, а держать в корзине товары без количества, то есть не набранные фактически, это нонсенс.

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

А пояснение гласит getQuantity - количество товара. Но в любом случае какой смысл это проверять? Данное условие должно проверяться во время добавления товара в корзину, а для выяснения цвета кнопки нужно проверять только наличие товара в корзине.

если я правильно понял, то проверку надо делать такую

if (productsArr[sbId] ? 1 : 0)

если да, то текст и цвет кнопки после перезагрузки опять сбрасывается(

Это я пример привел, и это условная запись (тернарный оператор), более лаконичная запись if ... else ... Если в вашем случае ее использовать, то это так:

productsArr[sbId] ? (
    $('span[data-sb-id-button="'+sbId+'"]').text('Добавить в корзину'),
    $(this).addClass('button-active')
) : (
    $('span[data-sb-id-button="'+sbId+'"]').text('Удалить в корзину'),
    $(this).removeClass('button-active')
)

То есть "читабельность" такого кода не очень. А значит:

if(productsArr[sbId]) {
    $('span[data-sb-id-button="'+sbId+'"]').text('Добавить в корзину');
    $(this).addClass('button-active');
} else {
    $('span[data-sb-id-button="'+sbId+'"]').text('Удалить в корзину');
    $(this).removeClass('button-active');
}

Вот только не понять странность в $(this). Если это кнопка, а span ее текст, то зачем же такие извращения. Если дочерних span у элемента не один, то все равно все можно описать цепочкой, а значит вполне можно обойтись и "читабельным" тернарным оператором:

productsArr[sbId] ? $(this).addClass('button-active').find('span[data-sb-id-button]').text('Удалить в корзину') : $(this).removeClass('button-active').find('span[data-sb-id-button]').text('Добавить в корзину');

А лимит на количество нет смысла проверять в данном случае. Ведь если к примеру лимит 3, то кнопка должна быть красной и при одном товаре в корзине, ибо его то можно уже удалять из нее, и при двух, и при трех.

PS. Какая-то путаница с текстом на кнопке, на мой взгляд, в условиях.

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

А корзина что "в облаках витает"? Если страница содержит корзину, то есть, есть товары добавленные, то зачем же ее дублировать?

Не работать может только потому, что вы не так или не к тому обращаетесь, пример показанный это подтверждает.

Кто формирует корзину? Если это делает сервер при каждом запросе страницы, то ему не сложно при выводе кода страницы и корзины на ней, определить товар в корзине и прописать класс/текст кнопке. Если корзина хранится у клиента или он ее получает отдельным запросом после загрузки страницы, значит нужно взять массив товаров корзины, обойти их циклом, в котором кнопкам связанных с ними товаров присвоить класс и текст.

верно, корзина не витает в облаках), она хранится в локальном хранилище localStorage

>>> значит нужно взять массив товаров корзины, обойти их циклом, в котором кнопкам связанных с ними товаров присвоить класс и текст
___
сейчас попробую

Пробуйте, но только это:

productsArr[sbId] ? $(this).addClass('button-active').find('span[data-sb-id-button]').text('Удалить в корзину') : $(this).removeClass('button-active').find('span[data-sb-id-button]').text('Добавить в корзину');

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

$('span[data-sb-id-button='+id+']').text('Удалить из корзины').closest('button').addClass('button-active');

где id, это текущий идентификатор товара в итерации, а button селектор кнопки.

получается вот это нужно загнать в цикл?

productsArr[sbId] ? $(this).addClass('button-active').find('span[data-sb-id-button]').text('Удалить в корзину') : $(this).removeClass('button-active').find('span[data-sb-id-button]').text('Добавить в корзину');

for(leti=0; i<productsArr[sbId].length; i++) {

productsArr[sbId] ? $(this).addClass('button-active').find('span[data-sb-id-button]').text('Удалить в корзину') : $(this).removeClass('button-active').find('span[data-sb-id-button]').text('Добавить в корзину');
}

Зачем? Когда выбирается/удаляется товар, вот тогда требуется определить класс/текст кнопке. А страница загружается с кнопками по умолчанию, то есть с не выбранными, следовательно нужно только добавить класс/текст для тех, товары которых есть в корзине.

Вы бы вместо картинок html код кнопки выставили, и структуру корзины описали, достаточно было бы пути в ней к товарам.

Если объект/массив корзины или свойство объекта корзины содержащего товары всегда на странице есть, но может быть пустым, то сначала проверяется не пуст ли объект. В противном случае проверяется наличие корзины на странице, и если доступно, только тогда обход товаров в цикле, вернее их идентификаторов.

Например, пусть условно корзина cart всегда на странице и под свойством products содержит объект с товарами, в котором первичные свойства это их идентификаторы. Тогда:

var cart = {
    products: {
        '23': {
            name: 'name',
            count: 2
        },
        '67': {
            name: 'name',
            count: 2
        }
    }
};

var ids = Object.keys(cart.products); //получить идентификаторы товаров

if(ids.length) { //если есть товары в корзине
    ids.forEach((id) => {
        $('span[data-sb-id-button='+id+']').text('Удалить из корзины').closest('button').addClass('button-active') //пометить кнопку товара
    })
}

Если товары, это массив объектов, в которых есть свойство содержащее идентификатор товара, то выбор несколько иной будет.

Судя по картинке, логика добавления/удаления товара в корзину означает, что даже условия:

товар в корзине ? красная : синяя

вообще не потребуется.

получается вместо prodacts будет basketItems

Вложение 4261

если basketItems, то как показано ранее:

var ids = Object.keys(basketItems); //получить идентификаторы товаров
....

и если это непосредственно и требует проверки наличия, то сразу:

Object.keys(basketItems).forEach((id) => {
        $('span[data-sb-id-button='+id+']').text('Удалить из корзины').closest('button').addClass('button-active') //пометить кнопку товара
    })
}

вот так работает, т.е меняет цвет при нажатии на кнопку

Object.keys(basketItems).forEach((id) => {
                    $('span[data-sb-id-button='+sbId+']').text('Удалить из корзины').closest('button').addClass('button-active') //пометить кнопку товара
                });

но все равно сбрасывается после перезагрузки страницы... если прописывать просто по id $('span[data-sb-id-button='+Id+']'), то не срабатывает смена цвета кнопки

А зачем эта операция при нажатии на кнопку?

Есть поле выбора количества товаров. Есть кнопка добавить в корзину.

При выборе количества должен проверяться лимит, величина которого должна определяться полем, ибо в корзине такого товара еще нет, и какого черта этот лимит прописан в корзине я не знаю. Соответствие количества лимиту должен проверять и сервер, а делать это он должен ни как не потому, что ему сообщит клиент. Если это держать в корзине, то как параметр для всех товаров, а не для каждого индивидуально, потому как в таком случае это полнейший бред. И, допустим, что выбрать количество менее 1 шт. этим полем нельзя.

Щелчок по кнопке добавления в корзину добавляет/удаляет товар. То есть если один обработчик, то достаточно toggleClass и смена текста. Все, никакой проверки наличия в корзине не требуется. У вас в комнате по умолчанию свет выключен, следующий щелчок по выключателю зажжет его, следующий выключит и т.д. Вы же не станете рассуждать - "выключен свет, ага, значит если щелкну, то выключится" и наоборот. Так и с этой кнопкой.

И состояние кнопки не запоминается, да и нет его смысла запоминать, ибо ее состояние будет определяться наличием товара в корзине. И это нужно для того чтобы определить это состояние только во время загрузки страницы. Только тут нужно обходить циклом товаров корзины, а при нажатии на нее, это действие полный бред.

Код кнопки показать не мешало бы, а то речь словно о неизвестных планетах.

вот более развернуто как у меня это устроено

<div class="product">
	<div class="product__list">
		<div class="product__element">
			<img class="product__img" src="smartbasket/img/pizza.png" alt="Пицца">
			<div class="product__name">Пицца «Ветчина и грибы»</div>
			<div class="product__price"><span class="product__price-number">320</span> Р</div>

			<div class="product__size">

				<div class="product__size-element" data-sb-curent-price="320" data-sb-curent-size="32" data-sb-curent-id-or-vendor-code="0032pz">32 см</div>
				<div class="product__size-element" data-sb-curent-price="260" data-sb-curent-size="26" data-sb-curent-id-or-vendor-code="0026pz">26 см</div>
				<div class="product__size-element" data-sb-curent-price="220" data-sb-curent-size="22" data-sb-curent-id-or-vendor-code="0022pz">22 см</div>

			</div>
			<div class="product__quantity"></div>
			<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 data-sb-id-button="0032pz">Добавить в корзину</span>
			</button>
		</div>
		<div class="product__element">
			<img class="product__img" src="smartbasket/img/pizza2.png" alt="Пицца">
			<div class="product__name">Пицца «Креветки и грибы»</div>

			<div class="product__price"><span class="product__price-number">320</span> Р</div>

			<div class="product__size">

				<div class="product__size-element" data-sb-curent-price="320" data-sb-curent-size="32" data-sb-curent-id-or-vendor-code="1132pz">32 см</div>
				<div class="product__size-element" data-sb-curent-price="260" data-sb-curent-size="26" data-sb-curent-id-or-vendor-code="1126pz">26 см</div>
				<div class="product__size-element" data-sb-curent-price="160" data-sb-curent-size="16" data-sb-curent-id-or-vendor-code="1116pz">16 см</div>

			</div>
			<div class="product__quantity"></div>
			<button class="product__add-to-cart-button" data-sb-id-or-vendor-code="1132pz" 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/pizza2.png">
				<i class="fas fa-cart-plus"></i> <span data-sb-id-button="1132pz">Добавить в корзину</span>
			</button>
		</div>
		<div class="product__element">
			<img class="product__img" src="smartbasket/img/pizza3.png" alt="Пицца">
			<div class="product__name">Пицца «Сыр,колбаса и оливки»</div>
			<div class="product__price"><span class="product__price-number">520</span> Р</div>

			<div class="product__size">

				<div class="product__size-element" data-sb-curent-price="520" data-sb-curent-size="52" data-sb-curent-id-or-vendor-code="2252pz">52 см</div>
				<div class="product__size-element" data-sb-curent-price="260" data-sb-curent-size="26" data-sb-curent-id-or-vendor-code="2226pz">26 см</div>
				<div class="product__size-element" data-sb-curent-price="160" data-sb-curent-size="16" data-sb-curent-id-or-vendor-code="2216pz">16 см</div>

			</div>
			<div class="product__quantity"></div>
			<button class="product__add-to-cart-button" data-sb-id-or-vendor-code="2252pz" data-sb-product-size="52" data-sb-product-name="Пицца «Ветчина и грибы»" data-sb-product-price="320" data-sb-product-quantity="1" data-sb-product-img="smartbasket/img/pizza3.png">
				<i class="fas fa-cart-plus"></i> <span data-sb-id-button="2252pz">Добавить в корзину</span>
			</button>
		</div>

addToBasketButton.click(function () {
		    let productsArr = methods.getProducts() || {}; // получаем данные корзины или создаём новый объект, если данных еще нет
		let sbId = $(this).attr("data-sb-id-or-vendor-code");  // ID товара
		let getQuantity = 0; // количество товара начинаем считать с 0
		let limitationInBasket = 3; // ограничение товара при добавлении в корзину

				for (let key in productsArr) {
					for (let value in productsArr[key]) {
						if (value === 'sbQuantity') {
							getQuantity += +productsArr[key][value];
						}
					}
				}

                    productsArr[sbId] ? $(this).removeClass('button-active').find('span[data-sb-id-button]').text('Добавить в корзину') : $(this).addClass('button-active').find('span[data-sb-id-button]').text('Удалить в корзину');

            if (productsArr[sbId]) {
					// let beforeClickHtml = $(this).html();
					// $(this).text('Товар уже в корзине');
					// $('body').append(methods.alertBlock('alreadyAdded'));
					// setTimeout(() => {
					// $(this).html(beforeClickHtml);
					// }, 1500);
					// return false;
					delete productsArr[sbId]; //Удаляем из массива
					methods.setProducts(productsArr); //Обновляем хранилище
					methods.getSmartBasketMinState(productsArr, 'updateSmartBasketMin'); //  обновляем корзину
					methods.commonResult(productsArr, 'updateCommonResult'); //обновляем общий результат
				} else {
					let productProperties = {};
					productProperties.sbId = sbId;
					productProperties.sbImg = $(this).data("sbProductImg");
					productProperties.sbName = $(this).data("sbProductName");
					if (defaults.productSize && defaults.productPrice) {
						productProperties.sbSize = $(this).attr("data-sb-product-size");
					}
					if (defaults.productQuantityWrapper) {
						productProperties.sbQuantity = $(this).parents('.' + defaults.productElement).find('.' + inputProductQuantity.attr('class')).val();
					} else {
						productProperties.sbQuantity = +$(this).data("sbProductQuantity");
					}
					productProperties.sbPrice = +$(this).attr("data-sb-product-price");
					productProperties.sbPrice.toFixed(2);
					if (defaults.productQuantityWrapper) {
					productProperties.sbPriceCommon = +$(this).attr("data-sb-product-price") * $(this).parents('.' + defaults.productElement).find('.' + inputProductQuantity.attr('class')).val();
					productProperties.sbPriceCommon.toFixed(2)
					} else {
					productProperties.sbPriceCommon = +$(this).attr("data-sb-product-price") * +$(this).data("sbProductQuantity");
					    productProperties.sbPriceCommon.toFixed(2)
					}
					// проверяем превышен лимит или нет
					if ( limitationInBasket <= getQuantity) {
					$('span[data-sb-id-button="'+sbId+'"]').text('Добавить в корзину');//Меняем текст
					$(this).removeClass('button-active'); // удалить цвет
					$('body').append(methods.alertBlock('limitationInBasket'));
					} else { // иначе товар добавлен в корзину
					productsArr[sbId] = productProperties;
					methods.setProducts(productsArr); //записываем в localStore
					smartBasket.empty(); // проверка пустой переменной
					smartBasket.append(methods.showProducts(productsArr));
					methods.getSmartBasketMinState(productsArr, 'updateSmartBasketMin');
					methods.commonResult(productsArr, 'updateCommonResult');
				}
				}
			});

			return smartBasket;
		},

да Вы правы, только если дома свет зажечь, то свет горит и не потушится пока я его не выключу (ну или не отключат свет), а у кнопки при обновлении страницы сбрасывается цвет. Вы правы нужно проверять

Если (такой id уже есть в корзине) тогда
выводим красную кнопку данному id
конецЕсли

только почему то и так не срабатывает, все равно сбрасывается

<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 data-sb-id-button="0032pz">Добавить в корзину</span>
</button>

Зачем у span data-sb-id-button если ID товара определено у кнопки data-sb-id-or-vendor-code, что в общем то удобнее получать как при добавлении/удалении товара, так и при поиске кнопки? То есть, при щелчке по кнопке это:

productsArr[sbId] ? $(this).removeClass('button-active').find('span[data-sb-id-button]').text('Добавить в корзину') : $(this).addClass('button-active').find('span[data-sb-id-button]').text('Удалить в корзину');

и вот это

for (let key in productsArr) {
                    for (let value in productsArr[key]) {
                        if (value === 'sbQuantity') {
                            getQuantity += +productsArr[key][value];
                        }
                    }
                }

это какой то бред. Если addToBasketButton, это и есть кнопка, о чем говорит let sbId = $(this).attr("data-sb-id-or-vendor-code"); // ID товара, хотя по человечески это должно быть:

let sbId =  $(this).data("sb-id-or-vendor-code")
//либо
let sbId =  this.dataset.sbIdOrVendorCode

то спрашивается нахрена нужен цикл for (let key in productsArr) ... если известен конкретный товар и один, который может добавляться только при первом щелчке по кнопке, ибо после него кнопка уже выполняет операцию удаления товара, должна выполнять коли кодом это прописано?

согласен цикл не нужен, я его убрал, по поводу data-sb-id-or-vendor-code="001" тоже переписал как Вы сказали спасибо Вам огромное, а по поводу кнопки как лучше сделать?

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

<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 идентификатор товара

Вы не понимаете сути действия. В цифровой электронике существуют устройство называемое триггером. Это устройство с двумя устойчивыми состояниями на выходе, переключить которое можно подачей сигнала на его вход. Выключатель света в вашей комнате тоже можно назвать триггером - выключатель его это вход, а его контакты, это выход. Щелкнули - состояние включено, свет горит, щелчок - состояние выключено, свет погашен и т.д.

А попробуйте этим выключателем трижды включить свет, не выключая его, после чего только можно его будет выключить. Получится? Конечно нет, для таких случаев требуется счетный триггер, который будет запоминать (накапливать) состояния и после определенного количества (количества сигналов на входе, тактов) выключит свет.

Думаете с вашей кнопкой добавления товара в корзину, которая по условию в коде не является "счетным триггером" и которая после первого же щелчка по ней меняет свое назначение, такой финт получится? Следовательно логика вашего кода ни к черту.

нужно прописать в цикле добавления товаров?

а тут прописать метод удаления?

Зачем?

Все что требуется из операций, то и пишите. Если добавление, значит обращение к методу/функции (не знаю что там у вас) добавления, позвоните Кате и пригласите ее в кино и т.д. и т.п. А если удаление, значит обращение к методу/функции (не знаю что там у вас) удаления, позвонить Кате и извиниться, пригласить в кино Свету и т.д. и т.п.

Я не знаю что и как у вас в полном объеме, да и вникать в это и некогда, и не охота. :) Поэтому, из того что пишу, вам нужна только суть, а далее вы уже по этой "дорожной карте" применяя свои методы/функции, свои элементы в верстке и их селекторы/атрибуты выполняйте это же самое.

Сохраните это у себя и запустите, пощелкайте добавление/обновление/удаление товаров с обновлением страницы. Все работает? Что в сути самой работы непонятного? В примере все очень просто, нет нагромождения лишних элементов и их атрибутов/классов. Самые необходимые операции и все. Это как раз для того, чтобы и была понятна суть механизма. Облепите ее своими наворотами и все.

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
h3 {
    margin-top: 0;
}
li {
    display: inline-block;
    list-style: none;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 5px;
}
.btn {
    width: 100%;
    padding: 10px 20px;
    border: none;
    background-color: #6FBBFC;
    margin-top: 15px;
    cursor: pointer;
}
.btn span:after {
    content: 'Добавить в корзину';
}
.btn.add {
    background-color: #FE6C6C;
}
.btn.add span:after {
    content: 'Удалить из корзины';
}
.to-cart:after {
    content: 'В корзину:';
}
.to-cart.add:after {
    content: 'В корзине:';
    color: #C70404;
}
</style>
<script type="text/javascript">
//страница с товарами, получаем сразу корзину
var cart = localStorage.cart && JSON.parse(localStorage.cart) || {};
//добавляем товар
function add(id, name, n) {
    cart[id] = {name: name, count: n};
    mem();     
}
//обновляем товар
function upd(id, n) {
    cart[id].count = n;
    mem();     
}
//удаляем товар
function del(id) {
    delete cart[id];
    mem();     
}    
//изменения корзины сохраняем
function mem() {
    console.log(cart);
    localStorage.cart = JSON.stringify(cart);
}

$(function() {
    //добавление/удаление товара
    $('#products').on('click', 'button', function() {
        //все что потребуется для дольнейших операций    
        var bt = $(this), 
            id = bt.data('id'), 
            p = bt.closest('li'), 
            v = p.find('input');
            
        if(bt.hasClass('add')) {
            //удаление товара с ID из корзины
            del(id);
            v.val(v.attr('min')); //сбросить значение поля количества до мин. значения
            //и прочие сопутствующие операции
        } else {
            //добавление товара с ID в корзину
            add(id, p.find('h3').text(), +v.val());
            //и прочие сопутствующие операции    
        }
     
        bt.add(v.prev()).toggleClass('add'); //изменение состояния кнопки, и метки поля количества
    
    }).on('change', 'input', function() { //изменение количества товара в корзине
        var id = this.dataset.id;
        if(!cart[id]) return;
        upd(id, this.valueAsNumber);
        //и прочие сопутствующие операции
    });
    //отметить товары в корзине при загрузке страницы
    Object.keys(cart).forEach((id) => {
        $('button[data-id='+id+']').addClass('add').closest('li').find('label').addClass('add').next().val(cart[id].count)
    });     
});
</script>
</head>
<body>
<ul id="products">
    <li>
        <h3>Портвейн</h3>
        <div>
            <label class="to-cart"></label> <input data-id="15" type="number" min="1" max="3" value="1" autocomplete="off" /> бутылей
        </div>
        <button class="btn" data-id="15"><span></span></button>       
    </li>
    <li>
        <h3>Кагор</h3>
        <div>
            <label class="to-cart"></label> <input data-id="215" type="number" min="1" max="5" value="1" autocomplete="off" /> бутылей
        </div>
        <button class="btn" data-id="215"><span></span></button>       
    </li>
    <li>
        <h3>Коньяк</h3>
        <div>
            <label class="to-cart"></label> <input data-id="67" type="number" min="1" max="1" value="1" autocomplete="off" /> бутылей
        </div>
        <button class="btn" data-id="67"><span></span></button>       
    </li>
    <li>
        <h3>Самогон</h3>
        <div>
            <label class="to-cart"></label> <input data-id="13" type="number" min="1" max="100" value="1" autocomplete="off" /> литров
        </div>
        <button class="btn" data-id="13"><span></span></button>       
    </li>
</ul>
</body>
</html>

laimas,
спасибо Вам