¿Cómo puedo hacer que el contenido del cuadro modal cambie después de hacer clic en una imagen específica? Estoy haciendo un proyecto y no quiero usar mucho código, así que me gustaría que un usuario hiciera clic en cualquier imagen y obtuviera los resultados de esa imagen específica solo en el contenido del cuadro modal, pero he intentado agregar PHP AS SE MUESTRA A CONTINUACIÓN y hacer muchos cuadros modales QUE FUE ESTRESANTE Y EFICIENTE. Por favor, deme instrucciones detalladas y dígame si me equivoco de una manera educada.

 <div id="projects"> <h2 >Projects</h2> <h5>Here Some mind blowing project made by pupils of our school Caleb British International school. <br> Click on the image to access<br> </h5> <h4>A Basic Calculator by Adachukwu Ezechukwu</h4> <img id="ae-calc" src="images/ae-calc.png" alt="A Basic Calculator by Adachukwu Ezechukwu" onclick="<?php $img = 1 ?>" > <br> <br> <h4>A Simple Calendar by Adachukwu Ezechukwu</h4> <img id="ae-mdc" src="images/ae-mdc.png" alt="A Simple Calendar by Adachukwu Ezechukwu" onclick="<?php $img = 2 ?>"> </div> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> <h2>A Basic Calculator</h2> </div> <div class="modal-body"> <?php if ($img = 2) { ?> <iframe src="mdc/index.php" width="100%" height="350px"></iframe> <?php } elseif ($img = 1) {?> <iframe src="calculatorapp/index.php" width="100%" height="350px"></iframe> <?php } ?> </div> </div> </div> </div> </div> <script> var modal = document.getElementById("myModal"); // Get the image and insert it inside the modal - use its "alt" text as a caption var img1 = document.getElementById("ae-calc"); var img2 = document.getElementById("ae-mdc"); var modalImg = document.getElementById("img01"); img1.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; } img2.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } </script>