How can I make the modal box's content change after you click a specific image. I am doing a project and I do not want to use to much code so I would like it if a user were to click on any image and get the results of that specific image only on the modal box content but I have tried adding PHP AS SHOWN BELOW and making many modal boxes WHICH WAS STRESSFULL AND IN EFFICIENT, Please give me a detailed instruction and tell me if I am wrong in a polite way.

<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>