Обновление статуса кнопки «Купить товар» при наличии более одного товара на странице с помощью JavaScript в приложении Django

Я Tring обновить кнопку покупки на основе количества цветов на этом продукте в моем django приложение с javaScript мой код работает, если у меня есть один из этого элемента на моей странице, но где-то в коде, когда у меня есть некоторые swiper, чтобы показать любимые продукты должны продать продукты или должны увидеть продукты у меня есть один и тот же элемент в разных местах и когда я пытаюсь изменить цвет продуктов он изменить первый из вида этого продукта в странице у меня есть это представление для проверки цвета продукта количество :

def quantity_of_product_with_color(request):
    color_id = request.GET.get('color')
    try:
        product_color = ProductColor.objects.get(id=color_id)
        data = {
            'in_stock': product_color.quantity > 0,
            'quantity': product_color.quantity
        }
    except ProductColor.DoesNotExist:
        data = {
            'in_stock': False,
            'quantity': 0
        }

    return JsonResponse(data)

и для примера у меня есть этот html код :

поэтому я пишу этот JS код, мои знания о js очень малы :

document.addEventListener('DOMContentLoaded', function () {
    // Attach event listener to body once to avoid duplication
    document.body.addEventListener('change', function (event) {
        if (event.target.classList.contains('color-radios')) {
            const productId = event.target.getAttribute('data-product-id');
            alert(productId);
            const colorId = event.target.value;

            const url = `${shopUrl}?color=${colorId}`;


            fetch(url)
                .then(response => response.json())
                .then(data => {

                    const productContainer = document.querySelector(`.buy-btn[data-product-id="${productId}"]`);


                    if (productContainer) {
                        if (data.in_stock) {
                            productContainer.classList.remove('btn-danger', 'disabled');
                            productContainer.classList.add('main-color-one-bg');
                            productContainer.innerHTML = `<i class="bi bi-basket text-white"></i> <span class="text-white">خرید محصول</span>`;
                        } else {
                            productContainer.classList.add('btn-danger', 'disabled');
                            productContainer.classList.remove('main-color-one-bg');
                            productContainer.innerHTML = `<i class="bi bi-basket text-white"></i> <span class="text-white">اتمام موجودی</span>`;
                        }
                    }
                })
                .catch(error => console.error('Error:', error));
        }
    });
});

Как я уже говорил, когда у меня есть один продукт на странице, он работает нормально, но когда у меня их несколько, это не так. Я знаю, что есть проблема с id или data-product-id, но я не могу решить эту проблему

Вернуться на верх