Estoy haciendo una web en la que quiero hacer una galería y quiero que este javascript me sirva para crear un pop up por imagen. Pero le cambio el nombre del id a #open2 #close2 #modal_container2 y no me funciona. ¿Alguien sabe que puede ser? La pregunta no es como hacer la galería, si no cómo hacer que el modal me sirva para cada foto. Creo que el problema está en 

> addEventListener('click'



<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    const open = document.getElementById('open');
    const modal_container = document.getElementById('modal_container');
    const close = document.getElementById('close');

    open.addEventListener('click', () => {
      modal_container.classList.add('show');
    });

    close.addEventListener('click', () => {
      modal_container.classList.remove('show');
    });

<!-- language: lang-css -->

      .modal-container {
      background: rgba(0, 0, 0, 0.75);
      align-items: center;
      justify-content: center;
      position: fixed;
      pointer-events: none;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 100vh;
      width: 100vw;
      opacity: 0;
      z-index: 2;
      vertical-align: middle;
    }

    .show {
      pointer-events: auto;
      opacity: 1;
      z-index: 2;
    }

    .centrate {
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

<!-- language: lang-html -->

    <li class="grid-item animacion wow fadeInUp" data-wow-delay="0.4s">
      <a href="#" id="open">
        <div class="portfolio-img bg-extra-dark-gray"><img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit."
          /></div>
      </a>
      <span class="portfolio-item-title">Lorem ipsum.</span>
    </li>


    <div class="modal-container" id="modal_container">
      <div class="centrate">
        <img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" />
        <p style="color: aliceblue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit.</p>
        <button id="close" href="#">Cerrar</button>
      </div>
    </div>

<!-- end snippet -->

Como podéis comprobar estoy intentando hacer esto para las siguientes imágenes pero no me está funcionando. No se si al ponerlo así me estoy explicando un poco mejor.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    const open2 = document.getElementById('open2');
    const modal_container2 = document.getElementById('modal_container2');
    const close2 = document.getElementById('close2');

    open.addEventListener('click', () => {
      modal_container2.classList.add('show2');
    });

    close.addEventListener('click', () => {
      modal_container2.classList.remove('show2');
    });

<!-- language: lang-css -->

      .modal-container2 {
      background: rgba(0, 0, 0, 0.75);
      align-items: center;
      justify-content: center;
      position: fixed;
      pointer-events: none;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 100vh;
      width: 100vw;
      opacity: 0;
      z-index: 2;
      vertical-align: middle;
    }

    .show2 {
      pointer-events: auto;
      opacity: 1;
      z-index: 2;
    }

    .centrate {
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

<!-- language: lang-html -->

    <li class="grid-item animacion wow fadeInUp" data-wow-delay="0.4s">
      <a href="#" id="open2">
        <div class="portfolio-img bg-extra-dark-gray"><img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit."
          /></div>
      </a>
      <span class="portfolio-item-title">Lorem ipsum.</span>
    </li>


    <div class="modal-container2" id="modal_container2">
      <div class="centrate">
        <img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" />
        <p style="color: aliceblue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit.</p>
        <button id="close2" href="#">Cerrar</button>
      </div>
    </div>

<!-- end snippet -->