Здравствуйте не очень шарю в JS.Есть карточки товаров и есть один попап на все. Нужно чтоб при открытии в попап копировался блок с инфо о товаре. Подскажите как реализовать. У меня получается скопировать но копируется со всех карточек, а нужно чтоб копировалось с той карточки на которой вызывается попап.
const popupLinks = document.querySelectorAll('.popup-link');
const popupBody = document.querySelector('.popup');
const popupContent = document.querySelector('.popup__content');
const popupCloseIcon = document.querySelectorAll('.popup__close');
const body = document.querySelector('body');
const productCard = document.querySelectorAll('.product__card');
const productCardInfo = document.querySelectorAll('.product__card-inner');
let unlock = true;
const timeout = 300;
if (productCard.length > 0) {
productCard.forEach(productCardItem => {
productCardInfo.forEach(productInfo => {
popupLinks.forEach(popupLink => {
popupLink.addEventListener('click', function(e) {
const cloneProductCardInfo = productInfo.cloneNode(true);
popupContent.prepend(cloneProductCardInfo);
if (popupBody) {
popupOpen(popupBody);
e.preventDefault();
}
});
});
});
});
}
if (popupCloseIcon.length > 0) {
for (let index = 0; index < popupCloseIcon.length; index++) {
const el = popupCloseIcon[index];
el.addEventListener('click', function(e) {
popupBody.classList.remove('popup-active');
popupContent.classList.remove('content-active');
body.classList.remove('lock');
e.preventDefault();
console.log(this.popupContent);
});
}
}
function popupOpen(popupBody) {
if (popupBody) {
const popupActive = document.querySelector('.popup-active');
popupBody.classList.add('popup-active');
popupContent.classList.add('content-active');
body.classList.add('lock');
popupBody.addEventListener('click', function(e) {
if (!e.target.closest('.popup__content')) {
popupClose(e.target.closest('#popup'));
}
});
}
}
function popupClose(popupActive) {
if (unlock) {
popupActive.classList.remove('popup-active');
popupContent.classList.remove('content-active');
body.classList.remove('lock');
}
}
.product__grid-template {
padding-top: 25px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
grid-gap: 20px;
background-color: rgb(203 212 213 / 96%);
justify-content: center;
padding-bottom: 40px;
z-index: 10;
}
.product__card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border: 2px solid gray;
border-radius: 6px;
background-color: rgb(247, 247, 247, 0.9);
}
.product__card-image {
position: relative;
width: 200px;
height: 250px;
margin: 5px auto;
padding-bottom: 10px;
}
.product__card-image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 250px;
border-radius: 6px;
}
.hover-image {
opacity: 0;
transition: all ease-in-out 0.5s;
}
.product__card-image:hover .hover-image {
opacity: 1;
transition: all ease-in-out 0.5s;
}
.product__card-image:hover img.main-img,
.product__card-image:hover img.main-img:hover {
opacity: 0;
transition: all ease-in-out 0.5s;
}
.product__card-inner {}
.product__card-title {
padding: 20px 10px 10px 10px;
font-size: 16px;
text-align: center;
text-transform: uppercase;
}
.product__card-info {
padding: 5px 10px;
font-size: 14px;
line-height: 1.2;
text-align: center;
}
.product__description {
padding: 10px;
}
.product__description span {
display: block;
}
.product__card-price {
padding-top: 5px;
padding-bottom: 15px;
text-align: center;
}
.product__card-price p {
font-size: 22px;
font-weight: 900;
color: rgb(255, 16, 16);
}
.product__card-button,
.btn {
background-color: rgb(55, 73, 151);
width: 50px;
margin: 0 auto;
padding: 15px 30px;
border-radius: 6px;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.product__card-button:hover,
.btn:hover {
background-color: rgb(115, 115, 194);
transition: all 0.3s ease;
}
.product__card-button a {
color: #ffffffff;
}
.popup {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
transition: all ease 0.3s;
overflow-y: auto;
overflow-x: hidden;
}
.popup-active {
opacity: 1;
visibility: visible;
transition: all ease 0.3s;
}
.popup__body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.popup__content {
position: relative;
max-width: 420px;
background-color: rgba(244, 258, 267, 0.885);
color: #000000;
padding: 20px 50px;
border-radius: 6px;
transition: all ease 0.3s;
opacity: 0;
transform: translate(0px, -100%);
z-index: 10;
height: 0;
}
.content-active {
height: 100%;
transition: all ease 0.3s;
opacity: 1;
transform: translate(0px, 0%);
}
.popup__close {
position: absolute;
top: -15px;
left: 97%;
background-color: #ffffffff;
font-size: 16px;
font-weight: 900;
border: red 2px solid;
color: #000000;
padding: 8px;
border-radius: 50%;
cursor: pointer;
transition: all ease 0.3s;
}
.popup__close:hover {
background-color: black;
color: #ffffffff;
border-color: #ffffffff;
transition: all ease 0.3s;
}
.popup__title {
font-size: 30px;
text-align: center;
text-transform: uppercase;
padding-top: 50px;
}
.popup__img {
position: relative;
object-fit: cover;
width: 280px;
margin: 20px auto;
}
.popup__img img {
text-align: center;
}
.popup__price {
text-align: center;
font-size: 25px;
color: red;
}
.popup__price p {
padding: 5px;
}
.form__body {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
}
.form__body label {
position: absolute;
color: #000000;
transition: all ease 0.3s;
top: 14px;
left: 3%;
font-size: 18px;
}
.input__name-body,
.input__number-body {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}
input[type='text'],
input[type='number'] {
width: 300px;
outline: none;
border: none;
border-radius: 4px;
padding: 15px 10px;
}
input:focus+label {
transform: translate(-10%, -200%) scale(0.9);
transition: all ease 0.3s;
}
[type="text"]:not(:placeholder-shown)+label,
[type="number"]:not(:placeholder-shown)+label {
transform: translate(-10%, -200%) scale(0.9);
transition: all ease 0.3s;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input::placeholder {
color: transparent;
}
.popup__btn {
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
}
.btn {
color: rgb(225, 226, 236);
font-size: 20px;
}
.popup__info {
text-align: center;
text-transform: uppercase;
font-size: 20px;
padding: 10px 5px;
}
<div class="product">
<div class="inner">
<div class="product__grid-template">
<div class="product__card">
<div class="product__card-image">
<img class="main-img" src="img/bottle-dekor.jpg" alt="">
<img class='hover-image' src="img/bottle-dekor.jpg" alt="">
</div>
<div class="product__card-inner">
<div class="product__card-title">
<h3 class="card-title">декоративное украшение для барной стойки</h3>
</div>
<div class="product__card-info">
<div class="product__description">
<p class='card-description'>Cтеклянная черная бутылка на качающейся подставке с узорами - летящими золотыми пегасами.
<!--<span>-->Выглядит необычно и шикарно!
<!--</span>-->Пегас - символ превосходства, мощи, силы, скорости, свободы и красоты!
<!--<span>-->Это изделие будет прекрасным подарком ручной работы для ценителей эксклюзивных предметов интерьера.
<!--</span>-->Изделие с подставкой 52х21 см. Вес 3.7кг.Объемом 4.5л.</p>
</div>
<div class="product__card-price">
<p>Цена: 10000 р.</p>
</div>
</div>
</div>
<div class="product__card-button popup-link">
<a href="#">Купить</a>
</div>
</div>
<div class="product__card">
<div class="product__card-image">
<img class="main-img" src="img/bottles.jpg" alt="">
<img class='hover-image' src="img/bottles.jpg" alt="">
</div>
<div class="product__card-inner">
<div class="product__card-title">
<h3 class="card-title">денежные бутылочки</h3>
</div>
<div class="product__card-info">
<div class="product__description">
<p class='card-description'>Такой подарок принесет вам процветание и удачу!Бутылочки красивы и необычны, подойдут к любому празднику и юбилею! Такой подарок удивит и порадует ваших близких!</p>
</div>
<div class="product__card-price">
<p>Цена: 10000 р.</p>
</div>
</div>
</div>
<div class="product__card-button popup-link">
<a href="#">Купить</a>
</div>
</div>
<div class="product__card">
<div class="product__card-image">
<img class="main-img" src="img/kopilka.jpg" alt="">
<img class='hover-image' src="img/kopilka.jpg" alt="">
</div>
<div class="product__card-inner">
<div class="product__card-title">
<h3 class="card-title">копилка для мальчика</h3>
</div>
<div class="product__card-info">
<div class="product__description">
<p class='card-description'>
Копилка для мальчика. Выполнена на заказ.
</p>
</div>
<div class="product__card-price">
<p>Цена: 10000 р.</p>
</div>
</div>
</div>
<div class="product__card-button popup-link">
<a href="#">Купить</a>
</div>
</div>
<div class="product__card">
<div class="product__card-image">
<img class="main-img" src="img/ng-venok.jpg" alt="">
<img class='hover-image' src="img/ng-venok.jpg" alt="">
</div>
<div class="product__card-inner">
<div class="product__card-title">
<h3 class="card-title">новогодний венок на дверь</h3>
</div>
<div class="product__card-info">
<div class="product__description">
<p class='card-description'>Новогодний венок на дверь/стену. Диаметр 30см. При изготовлении использованы искуственные ветки, ёлочные шары, шишки сосновые, искуственные серебряные листья.</p>
</div>
<div class="product__card-price">
<p>Цена: 10000 р.</p>
</div>
</div>
</div>
<div class="product__card-button popup-link">
<a href="#">Купить</a>
</div>
</div>
</div>
</div>
</div>
<div class="popup" id="popup">
<div class="popup__body">
<div class="popup__content">
<div class="popup__close">X</div>
<!-- <h3 class="popup__title">название товара</h3> -->
<!-- <div class="popup__img">
<img src="img/img2.jpg" alt="">
</div> -->
<!-- <div class="popup__price">
<p>Цена:</p>
<p>10000 р.</p>
</div> -->
<div class="popup__form">
<form action="#" class="form__body">
<div class="input__name-body">
<input type="text" name="name" id="name" placeholder="Введите Имя">
<label for="name" class="input__name">Введите Имя</label>
</div>
<div class="input__number-body">
<input type="number" id="number" name="number" placeholder="Номер телефона">
<label for="number" class="input__number">Номер телефона</label>
</div>
</form>
</div>
<div class="popup__btn">
<a href="" class="btn">Отправить</a>
</div>
<div class="popup__info">
<h3>Мы перезвоним Вам в ближайшее время.</h3>
</div>
</div>
</div>
</div>