Всем привет, помогите с вопросом, почему так работает $(document).on('cart-add-complete.commerce', function

(e, params) {
var instance = params.data.instance;
switch (instance) {
case 'wishlist':
var growlText = "" + params.response.name + " добавлен в избранное";
var growlLink = "/otlozhennye";
// Находим SVG внутри кнопки по уникальному data-id и изменяем цвет
$('a[data-instance="wishlist"][data-id="' + params.response.id_name + '"]').addClass('active'); // Изменяем на серый цвет
// Также изменяем data-commerce-action на "remove"
$('a[data-instance="wishlist"][data-id="' + params.response.id_name + '"]').attr('data-commerce-action', 'remove');
break; а так нет
function handleClick(element) {
var id = element.getAttribute('data-id');
var name = element.getAttribute('data-name');
var action = element.getAttribute('data-commerce-action');
var instance = element.getAttribute('data-instance');




var growlText, growlLink;
if (instance === 'wishlist') {
growlText = action === 'add' ? name + " добавлен в избранное" : name + " удален из избранного";
growlLink = "/otlozhennye";
} else if (instance === 'comparison') {
growlText = action === 'add' ? name + " добавлен в сравнение" : name + " удален из сравнения";
growlLink = "/otlozhennye";
}


if (action === 'add') {
element.setAttribute('data-commerce-action', 'remove');
element.classList.add('active');
} else {
element.setAttribute('data-commerce-action', 'add');
element.classList.remove('active');
}


showToast(growlText, growlLink);
}

function showToast(growlText, growlLink) {
Toastify({
text: growlText,
destination: growlLink,
duration: 3000,
close: true,
gravity: "top", // `top` or `bottom`
position: "right", // `left`, `center` or `right`
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
} технически скрипт все меняет, но remove во втором случае не удаляет, а в первом удаляет после смены

Советую ознакомиться: Commerce