Как реализовать открытие попапа при клике на конкретное изображение, так чтобы каждое изображение открывало свой собственный попап?

Для реализации открытия попапа при клике на конкретное изображение без написания отдельного JavaScript-кода для каждого изображения можно использовать делегирование событий.

Вот пример кода:

HTML:
```html
<div id="popup-container">
  <!-- Контейнер попапа -->
</div>

<div id="images-container">
  <img src="image1.jpg" alt="Image 1" data-popup="popup1">
  <img src="image2.jpg" alt="Image 2" data-popup="popup2">
  <img src="image3.jpg" alt="Image 3" data-popup="popup3">
</div>

<div class="popups" style="display: none;">
  <div id="popup1" class="popup">
    <!-- Контент попапа для изображения 1 -->
  </div>
  
  <div id="popup2" class="popup">
    <!-- Контент попапа для изображения 2 -->
  </div>
  
  <div id="popup3" class="popup">
    <!-- Контент попапа для изображения 3 -->
  </div>
</div>
```

CSS:
```css
.popup {
  /* Стили попапа */
}
```

JavaScript:
```javascript
document.getElementById('images-container').addEventListener('click', function(event) {
  var target = event.target;
  
  if (target.tagName === 'IMG') {
    var popupId = target.getAttribute('data-popup');
    var popup = document.getElementById(popupId);
    
    openPopup(popup);
  }
});

function openPopup(popup) {
  // Открываем попап
  popup.style.display = 'block';
}
```

В этом примере используется атрибут `data-popup`, чтобы каждому изображению можно было присвоить идентификатор попапа, который нужно открыть при клике на это изображение. При клике на контейнер с изображениями происходит проверка, является ли кликнутый элемент изображением. В случае, если это изображение, получаем его идентификатор попапа и открываем его, вызывая функцию `openPopup`.

Обратите внимание, что в этом примере все попапы заранее создаются в HTML и скрыты с помощью CSS (с помощью `display: none;`). При открытии попапа мы просто изменяем стиль свойства `display` на `block` для нужного попапа.