Jquery popup open and closes all at the same time, need to make it independent

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