Сопоставить ссылки в списке с кнопками
Есть попап с формой для выбора нужного номинала подарочной карты со списком номиналов, на который тыкаешь, выбирается нужный номинал и дальше жмешь на кнопку и улетаешь на оплату. Есть список товаров списком с кнопкой Купить карту. Нужно чтобы при нажатии на кнопку на определенном товаре из списка открывалось окно где в форме уже выбран нужны номинал. Так как url каждого товара и кнопки выбора номинала в форме содержат одинаковые строки "nominal-{}" решил именно прошерстить все url в списке товаров и сопоставить их с кнопками.
/*всплывающее окно*/
const popup = document.querySelector('.popup');
const popupOverlay = document.querySelector('.popup__overlay');
const popupBtn = document.querySelectorAll('.popup-btn');
const popupClose = document.querySelector('.popup__close');
for (const pb of popupBtn) {
pb.addEventListener('click', (e) => {
e.preventDefault();
document.body.classList.add('popup-open');
// список того что будем искать
var fields = [
'nominal-500',
'nominal-1000',
'nominal-1500',
'nominal-2000',
'nominal-2500',
'nominal-3000',
'nominal-3500',
'nominal-4000',
'nominal-5000',
'nominal-7000',
'nominal-8500',
'nominal-10000'
];
var nominals = document.querySelectorAll(`.${fields.join(', .')}`);
fields.forEach(field => {
const products = document.querySelectorAll('.product a'); //перебираем ссылки
products.forEach(product => {
if(product.href.indexOf(field) > -1) { // ищем нужную ссылку
nominals.forEach(nominal => {
nominal.classList.remove('active-nominal');
if (nominal.classList.contains(field) ) {
nominal.click();
nominal.classList.add('active-nominal');
}
})
}
})
});
})
}
function popClose() {
document.body.classList.remove('popup-open');
}
function popRemove(e) {
if(e.code === "Escape" && document.body.classList.contains('popup-open') || e.target === popupOverlay || e.target === popupOverlay) {
popClose();
}
}
document.addEventListener('keydown', popRemove);
popup.addEventListener('click', popRemove);
popupClose.addEventListener('click', popClose);
Попап работает как надо. Не получается только адекватно сопоставить ссылку на товар в блоке которого нажали на кнопку и кнопки выбора номиналов в форме. Если законсолить, то выводит весь список url, а не конкретный. Что сделать нужно?