jQuery - set DOM img and enlarge img modal

Question

/* news img modal overlay */
.newsImg-modal-overlay {
  z-index: 9999;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: auto;
}

/* enlarged image */
.newsImg-enlarged-image {
  /* max-width: 90%;
  max-height: 90%; */
}

 

HTML

<div class="newsImg-modal-overlay" id="newsImgModalOverlay">
  <!-- Enlarged Image -->
  <img src="" class="newsImg-enlarged-image" id="newsImgEnlargedImage">
</div>

 

 

jQuery

$('img[src="https://example.com/example-img.jpg"]').attr('id', 'g6img');

// Click event with proper ID
$("#g6img").click(function () {
  // Get the source of the clicked image
  var imgSrc = $(this).attr("src");

  // Set enlarged image src
  $("#newsImgEnlargedImage").attr("src", imgSrc);

  // Show modal
  $("#newsImgModalOverlay").fadeIn();
});

// Close modal when clicking outside the enlarged image
$("#newsImgModalOverlay").click(function () {
  $(this).fadeOut();
});