Image Zoom with JS using a button

First of all, I apologize if my title is not understandable, English is not my first language. My main goal is to have an image modal and with a zoom button and if you click the zoom button the image modal will appear.

The output is this

[![enter image description here][1]][1]

[1]:

I tried using javascript it is working but my problem is the zoom button, when I use the zoom button on Onclick event it won't work.

This is my javascript codes for reference. I do not know how to fix this anymore.

/**
 * Modal
 */

const modal = () => {
  const images = document.querySelectorAll('.js-img-modal');
  const modal = document.querySelector('.modal');
  const zoom = document.querySelector('.zoom');
  const modal_content = modal.querySelector('.modal__content');
  const modal_image = modal.querySelector('.modal__image');
  const modal_close = modal.querySelector('.modal__close');

  let pz = new PinchZoom.default(modal_content, {maxZoom: 3});

  const closeModal = (modal) => {
    if (modal.classList.contains('active')) {
      modal.classList.remove('active');
      // const viewportmeta = document.querySelector('meta[name=viewport]');
      // viewportmeta.setAttribute('content', "width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=yes");
      // setTimeout(() => {
      //   viewportmeta.setAttribute('content', "width=device-width, initial-scale=1, shrink-to-fit=yes");
      // }, 100);
    }
    else {
      console.error('Modal not closed');
    }
  }

  for (let image of images) {
    zoom.addEventListener('click', () => {
      modal_image.src = image.src;
      modal.classList.add('active');
    });
  }

  modal_image.addEventListener('click', (e) => {
    e.stopPropagation();
  });

  modal.addEventListener('click', () => {
    closeModal(modal);
  });
}

export default modal