Всплывающее окно Jquery открывается и закрывается одновременно, необходимо сделать его независимым ⇐ Jquery

[Anonymous]

Это всплывающее окно


X
'.do_shortcode('[contact-form-7 id="14801" title="PDF Download"]').'
Download




это кнопка
'.$a['dl_btn_title'].'

это помещается внутри функции короткого кода, поэтому я могу разместить его где угодно.
Проблема здесь в том, что когда я добавляю два или более коротких кода в страница, она открывает их все и закрывает одновременно
Вот мой код jquery

jQuery(document).ready(function(){

jQuery(".open").on("click", function() {
jQuery(".popup-overlay, .popup-content").addClass("active");
});

jQuery(".close").on("click", function() {
jQuery(".popup-overlay, .popup-content").removeClass("active");
});

});


Я не знаю, как сделать его независимым от того, где я его разместил, я просто хочу, чтобы всплывающее окно работало только для этого короткого кода, поэтому, если есть 3 коротких кода, тогда будет 3 всплывающих окна. нажмите отдельно, спасибо за любую помощь
Это сработало для меня


X
'.do_shortcode('[contact-form-7 id="14801" title="PDF Download"]').'
Download



'.$a['dl_btn_title'].'

и сделал свой скрипт вот таким
if ( jQuery(".open").hasClass("open1") ) {

jQuery(".open1").on("click", function() {
jQuery(".popup-overlay.po1").addClass("active");
});
jQuery(".close.close1").on("click", function() {
jQuery(".popup-overlay.po1").removeClass("active");
});
}
if ( jQuery(".open").hasClass("open2") ) {

jQuery(".open2").on("click", function() {
jQuery(".popup-overlay.po2").addClass("active");
});
jQuery(".close.close2").on("click", function() {
jQuery(".popup-overlay.po2").removeClass("active");
});
}
if ( jQuery(".open").hasClass("open3") ) {

jQuery(".open3").on("click", function() {
jQuery(".popup-overlay.po3").addClass("active");
});
jQuery(".close.close3").on("click", function() {
jQuery(".popup-overlay.po3").removeClass("active");
});
}
if ( jQuery(".open").hasClass("open4") ) {

jQuery(".open4").on("click", function() {
jQuery(".popup-overlay.po4").addClass("active");
});
jQuery(".close.close4").on("click", function() {
jQuery(".popup-overlay.po4").removeClass("active");
});
}
if ( jQuery(".open").hasClass("open5") ) {

jQuery(".open5").on("click", function() {
jQuery(".popup-overlay.po5").addClass("active");
});
jQuery(".close.close5").on("click", function() {
jQuery(".popup-overlay.po5").removeClass("active");
});
}
if ( jQuery(".open").hasClass("open6") ) {

jQuery(".open6").on("click", function() {
jQuery(".popup-overlay.po6").addClass("active");
});
jQuery(".close.close6").on("click", function() {
jQuery(".popup-overlay.po6").removeClass("active");
});
}
if ( jQuery(".open").hasClass("open7") ) {

jQuery(".open7").on("click", function() {
jQuery(".popup-overlay.po7").addClass("active");
});
jQuery(".close.close7").on("click", function() {
jQuery(".popup-overlay.po7").removeClass("active");
});
}
if ( jQuery(".open").hasClass("open8") ) {

jQuery(".open8").on("click", function() {
jQuery(".popup-overlay.po8").addClass("active");
});
jQuery(".close.close8").on("click", function() {
jQuery(".popup-overlay.po8").removeClass("active");
});
}
if ( jQuery(".open").hasClass("open9") ) {

jQuery(".open9").on("click", function() {
jQuery(".popup-overlay.po9").addClass("active");
});
jQuery(".close.close9").on("click", function() {
jQuery(".popup-overlay.po9").removeClass("active");
});
}
if ( jQuery(".open").hasClass("open10") ) {

jQuery(".open10").on("click", function() {
jQuery(".popup-overlay.po10").addClass("active");
});
jQuery(".close.close10").on("click", function() {
jQuery(".popup-overlay.po10").removeClass("active");
});
}


Подробнее здесь: https://stackoverflow.com/questions/787 ... ndependent