Как сделать, чтобы при клике на изображение открывался соответствующий ему попап? То есть изображение не 1, а несколько и попапов несколько?

Чтобы реализовать открытие соответствующего изображению попапа при клике, вам необходимо использовать JavaScript. Существует несколько способов достичь нужного эффекта, но я расскажу вам о наиболее простом и понятном способе.

1. Первым шагом вы должны добавить обработчик события "click" на каждое изображение, которое должно открывать попап. Для этого вы можете использовать метод addEventListener, который вызывается на каждом изображении.

const images = document.querySelectorAll('img');

images.forEach(image => {
  image.addEventListener('click', () => {
    // Здесь будет код для открытия попапа
  });
});

2. Далее вам нужно создать попап, который будет отображаться при клике. Попап может быть представлен в виде модального окна, всплывающего блока или в любой другой форме, которая вам удобна. В этом примере я просто создам всплывающий блок с классом "popup".

<div class="popup">
  <!-- Здесь может быть содержимое попапа, например, большая версия изображения -->
</div>

3. Теперь, при клике на изображение, нужно открыть соответствующий ему попап. Для этого вы можете добавить класс "active" к попапу, чтобы его отобразить, например, с помощью стилей CSS.

const images = document.querySelectorAll('img');
const popup = document.querySelector('.popup');

images.forEach(image => {
  image.addEventListener('click', () => {
    popup.classList.add('active');
  });
});

4. Однако, в данный момент, все изображения будут открывать один и тот же попап. Чтобы открыть соответствующий попап для каждого изображения, вам необходимо определить, какое изображение было кликнуто и подставить его соответствующую информацию внутрь попапа.

const images = document.querySelectorAll('img');
const popup = document.querySelector('.popup');
const popupImage = popup.querySelector('img');

images.forEach(image => {
  image.addEventListener('click', () => {
    const src = image.getAttribute('src'); // получаем атрибут "src" у кликнутого изображения
    const alt = image.getAttribute('alt'); // получаем атрибут "alt" у кликнутого изображения
    
    popupImage.setAttribute('src', src); // устанавливаем атрибуты "src" и "alt" для изображения попапа
    popupImage.setAttribute('alt', alt);
    
    popup.classList.add('active'); // открываем попап
  });
});

Теперь при клике на каждое изображение будет открываться соответствующий ему попап с изображением. Вы можете дальше настраивать попап, добавлять стилизацию, анимацию и т.д. в соответствии с вашими потребностями.