This is the popup
<div class="popup-overlay">
<div class="popup-content">
<button class="close">X</button>
<div>'.do_shortcode('[contact-form-7 id="14801" title="PDF Download"]').'</div>
<div class="download_link"><a href="'.$a['dl_url'].'" download>Download</a></div>
</div>
</div>
this is the button
<div class="download-brochure"><a class="open">'.$a['dl_btn_title'].'</a></div>
this is placed inside a shortcode function so that I can place it anywhere
The issue here is that when I add two two or more shortcodes in a page, it opens all of them and closes all at the same time
Here is my jquery code
<script>
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");
});
});
</script>
I don’t know how to make it independent to where I put it, I just want to make the popup work only for that shortcode, so if there are 3 shortcodes then 3 popup on click independently, thank you for any help