Добавил данные через ajax, удалил их и подставил новые, но jquery возвращает удаленные первые данные

Есть такой код который делает запрос к БД и возвращает данные

var clicked = false;
    $('body').on('click', '.products__btn-basket', function () {
        if (clicked === false) {
            clicked = true;
            const id = $(this).data('id');
            var form_data = new FormData();
            form_data.append('_method', 'POST');
            form_data.append('_token', '{{csrf_token()}}');
            $.ajax({
                url: "{{url('/catalog')}}" + '/' + id,
                data: form_data,
                type: 'POST',
                dataType: 'json',
                contentType: false,
                processData: false,

                success: function (response) {
                    clicked = false;
                    $('body').css('overflow', 'hidden');
                    $('.popup__img').attr('src', "{{asset('storage/uploads/products')}}" + "/" + response.product.img);
                    $('.popup__product-info').attr('data-id', response.product.id);
                    $('.popup__product-title').text(response.product.name);
                    $('.popup__product-desc').text(response.product.description);
                    $('.popup__product-weight').text(response.product.weight);
                    $('.popup__product-add .popup__price').text((Number(response.product.discount) === 0) ? response.product.price + ' ₽' : response.product.discount + ' ₽');
                    $('.popup-products').addClass('active');
                    const parent = document.getElementsByClassName('related-list')[0];

                    const r = response.related;
                    r.forEach(function (rel) {
                        let li = document.createElement('li');
                        li.classList.add('related-product');
                        li.setAttribute('data-id', rel.product2_id);
                        parent.appendChild(li);

                        let input = document.createElement('input');
                        input.classList.add('related-product__select');
                        input.setAttribute('type', 'checkbox');
                        input.setAttribute('id', 'rel-prod' + rel.product2_id);
                        li.appendChild(input);

                        let label = document.createElement('label');
                        label.setAttribute('for', 'rel-prod' + rel.product2_id);
                        li.appendChild(label);

                        let checkbox = document.createElement('div');
                        checkbox.classList.add('related-product__checkbox');
                        label.appendChild(checkbox);
                        let iTag = document.createElement('i');
                        iTag.classList.add('fas', 'fa-check');
                        checkbox.appendChild(iTag);

                        let divImg = document.createElement('div');
                        divImg.classList.add('related-product__img');
                        label.appendChild(divImg);
                        let img = document.createElement('img');
                        img.setAttribute('src', '{{ asset('storage/uploads/products/') }}' + '/' + rel.img);
                        divImg.appendChild(img);

                        let divName = document.createElement('div');
                        divName.innerHTML = rel.name;
                        divName.classList.add('related-product__name');
                        label.appendChild(divName);

                        let divPrice = document.createElement('div');
                        divPrice.innerHTML = (Number(rel.discount) === 0) ? rel.price + ' ₽' : rel.discount + ' ₽';
                        divPrice.classList.add('related-product__price');
                        label.appendChild(divPrice);


                    });

                },
                error: function (xhr, status, error) {
                    clicked = false;
                }
            })
        }
    });

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

$('.popup__btn-close').click(function () {
        closePopupProduct();
    });

    function closePopupProduct() {
        $('body').css('overflow', 'auto');
        $('.popup__product-info').removeAttr('data-id');
        $('.popup-products').removeClass('active');
        $('.popup__img').attr('src', "");
        $('.popup__product-title').text("");
        $('.popup__product-desc').text("");
        $('.popup__product-weight').text("");
        const parent = document.getElementsByClassName('related-list')[0];
        while (parent.firstChild) {
            parent.removeChild(parent.firstChild);
        }
    }

Но когда открываю новое модальное окно и в нем нажимаю на кнопку добавить, то данные в data-id беруться из первого вызванного окна

$('body').on('click', '.popup__product-add', function () {
saveSessionAddBasket($(this));
});
function saveSessionAddBasket (popupInfo) {
let data = [];
        data.push(popupInfo.parent().data('id'));
        $('.related-product.product-selected').each(function () {
            data.push(popupInfo.data('id'));
        });
        console.log(popupInfo.parent().data('id'));
};

Кто знает причину, из-за чего такое может быть? data-id первого запрашиваемого товара

data-id элемента в html коде

Вызываю карточку другого товара. На картинке видно, что data-id поменялся

А при получении данных возвращает старые


Ответы (0 шт):