dynamic modals when i click on dynamic buttons

Question

I, i'm new here so i don't really know mutch, but i need to figure out this thing: i have a php page with some dynamic buttons.

I want this dynamic buttons to open a modal with dynamic content but I can't figure out why it doesn't work.

As you can see from my test site here, if you click on the first button it will display the modal with correct content, but if you click on the second button (dinamically generatated) it doesn't display anyting.

here's my code, but it's more simple to understand trough the previous link;

<!------------------------------------------- ATTIVAZIONE MODAL--------------------------------->

    <script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("<?php echo $mq_solarium; ?>");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("chiudi_dimensione")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "flex";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
<!-------------------------------------------FINE ATTIVAZIONE MODAL--------------------------------->

.plan-wrapper {

    border: 3px solid #73AD21;
}

<div class="hero-wrapper dimensioni">
<?php
    //estraggo i valori per smart
    $query=mysqli_query($con, " SELECT * FROM appartamenti INNER JOIN moduli ON appartamenti.id_planimetria = moduli.id_planimetria  WHERE taglio='monolocale' AND visibile='1' "); 

?>

     
               
  <div id="myBtn"class="plan-wrapper">click me</div>

  <div style="background-color:DodgerBlue;" id="myModal" class="lightbox_wrapper_dimensione">
    <div id="close" class="chiudi_dimensione">X(close)</div>
    some variables from php
  </div>
</div>
 
 <?php       
}
    }
    else {
    // redirect user to another page
    header( "Location: ../index.php" ); die;
        }
?> 
 
 <!------------------------------------------- CHIUSURA PHP--------------------------------->   
  
</div>

Answer 1

In this case, you have id="myBtn" in multiple areas. The ID is designed to be unique in an entire document. So, when you have document.getElementById("myBtn") and the event to that object, it will work only for the very first element as you experienced before.

The solution is either to have different unique IDs or just use className.

If you want with Vanilla Javascript this is the solution:

var elements = document.getElementsByClassName("<?php echo $mq_solarium; ?>");
for( let i = 0; i < elements.length; i ++){
    elements[i].addEventListener("click", function(){
       modal.style.display = "flex";
    } );
}

Or using Jquery

$(".<?php echo $mq_solarium; ?>").click(function(){
    modal.style.display = "flex";
});

But make sure you will replace id="myBtn" to class="myBtn"