Styjun

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>

Problem is in getElementById() it can triger only 1 id at the time you should change this to some another logic of clicking and geting the modal data or foreach this script as well as data and generate different id values
So you can have only 1 myBtn id on whole page you can make something like myBtn1,myBtn2, myBtn3 ...
or
<div class='myBtn' data-id='1'>...content...</div>
and use this data-id to access modal you need

For example to show modal using jquery you can do like this
first change the id to class in each button and add data-id='number_of_item' numbers should be different the same thing you should do with modals you should generate them with id='myModal_number_of_item' in the same foreach! After you can use code bellow to open modal with query its easier for me but you can make it with pure javascript.

$('.myBtn').on('click', function() 
 var id = $(this).data('id');
 $('#myModal_'+id).show();
)

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"