Изображение не масштабируется по щелчку мыши

---

Привет ребята

У меня есть несколько изображений на веб-сайте, которые я хотел бы уменьшить, как только нажму. Все изображения имеют один и тот же класс, но другой идентификатор, и я использую этот класс в своем коде jQuery, чтобы получить идентификатор изображения, которое было нажато, чтобы применить к нему эффект масштабирования, но ничего не происходит.

Я не знаю, чего мне не хватает. Заранее спасибо, что помогли мне разобраться в этом!

Что я уже пробовал:

Код картинки в HTML:

<div class="col-lg-4 mb-4">
  <div class="card h-100">
    <h4 class="card-header">Pizzas</h4>
    <div class="card-body">
      <p class="card-text">Seasoned appropriately, right ingredients in and cooked just to the point,
        our pizzas will conquer your palette!</p>
      <img class="meal_image" src="Images/Pizzas.jpg" alt="Pizzas Meal" id="pizzas">
    </div>
    <div class="card-footer">
      <a href="#" class="btn btn-block btn-info">Take this</a>
    </div>
  </div>
</div>
<div class="col-lg-4 mb-4">
  <div class="card h-100">
    <h4 class="card-header">Steelazani</h4>
    <div class="card-body">
      <p class="card-text">Everything measures, mixed and tasted to perfection inorder
        to make you feel the sublime deliciousness!</p>
        <img class="meal_image" src="Images/Steelazani.jpg" alt="Steelazani Meal" id="steelazani">
    </div>
    <div class="card-footer">
      <a href="#" class="btn btn-block btn-info">Take this</a>
    </div>
  </div>
</div>

Модальный код (именно здесь должно отображаться увеличенное изображение):

<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

JS код для уменьшения нажата изображения в модальном:

<script>
    $(document).on('click', '.meal_image', function(){
      alert("bonjout");
          // Get the modal
      var modal = document.getElementById("myModal");

    // Get the image and insert it inside the modal - use its "alt" text as a caption
      var image_Id = $(this).attr("id");
      var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");

    modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;

    /*image_Id.onclick = function(){
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
    }
    });*/
    
    // 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>

---