JavaScript popup calling different images onclick

I have created an image popup which uses javaScript to call different images onClick.

HTML Code snippet for the same as below.

<img onmouseover="imgload();" src="11.jpg">
<img onmouseover="imgbarb();" src="13.jpg">

I use the below javaScript to load the onmouseover function

JavaScript code for 11.jpg

function imgload() {
  var imgContainers   = document.querySelectorAll('.img-container');
  var tooltipElements = document.querySelectorAll('.tooltip');
  var popup           = document.getElementById('imagePopup1');
  var popupOverlay    = document.getElementById('imagePopupOverlay1');
  var popupImage      = document.getElementById('popupImage1');
  var closePopupBtn   = document.getElementById('closeImagePopupBtn1');
  // Show tooltip on hover
  imgContainers.forEach((container, index) => {
    var tooltip = container.querySelector('.tooltip');
    var image   = container.querySelector('img');
    container.addEventListener('mouseenter', function() {
      tooltip.style.display = 'block';
    });
    container.addEventListener('mouseleave', function() {
      tooltip.style.display = 'none';
    });
    // Open full-size image popup when image is clicked
    image.addEventListener('click', function() {
      var imageSrc               = "11-new.jpg";
      popupImage.src             = imageSrc;
      popup.style.display        = 'block';
      popupOverlay.style.display = 'block';
    });
  });
  // Close the image popup when clicking the close button
  closePopupBtn.addEventListener('click', function() {
    popup.style.display        = 'none';
    popupOverlay.style.display = 'none';
  });
  // Close the image popup when clicking the overlay
  popupOverlay.addEventListener('click', function() {
    popup.style.display        = 'none';
    popupOverlay.style.display = 'none';
  });
}

JavaScript code for 13.jpg

function imgbarb() {
  var imgContainers   = document.querySelectorAll('.img-container');
  var tooltipElements = document.querySelectorAll('.tooltip');
  var popup           = document.getElementById('imagePopup1');
  var popupOverlay    = document.getElementById('imagePopupOverlay1');
  var popupImage      = document.getElementById('popupImage1');
  var closePopupBtn   = document.getElementById('closeImagePopupBtn1');
  // Show tooltip on hover
  imgContainers.forEach((container, index) => {
    var tooltip = container.querySelector('.tooltip');
    var image   = container.querySelector('img');
    container.addEventListener('mouseenter', function() {
      tooltip.style.display = 'block';
    });
    container.addEventListener('mouseleave', function() {
      tooltip.style.display = 'none';
    });
    // Open full-size image popup when image is clicked
    image.addEventListener('click', function() {
      var imageSrc               = "13-new.jpg";
      popupImage.src             = imageSrc;
      popup.style.display        = 'block';
      popupOverlay.style.display = 'block';
    });
  });
  // Close the image popup when clicking the close button
  closePopupBtn.addEventListener('click', function() {
    popup.style.display        = 'none';
    popupOverlay.style.display = 'none';
  });
  // Close the image popup when clicking the overlay
  popupOverlay.addEventListener('click', function() {
    popup.style.display        = 'none';
    popupOverlay.style.display = 'none';
  });
}

I have around 30+ images. So each time when I wish to create a popup image for a new image, I have to create a new function and then call onmouseover everytime.

I feel it is very cumbersome to manage as it also increases the code.
Is there a simple way to this so I do not have to create a new function every time when I add a new image for popup?

I tried if and else, arrays and other stuff, but it did not work.