Добавил данные через 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'));
};
Кто знает причину, из-за чего такое может быть?



