Открытие изображений в модальном окне django?

Question

[san7667]

Добрый день!
Пытаюсь сделать открытие изображений в модальном окне:

html:

<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

{% for item in images %}
<img id="myImg" src ="{{ item.image }}">
{% endfor %}

js:

var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() { 
  modal.style.display = "none";
}

Проблема в том, что открывает только первое изображение, остальные игнорирует.
Как мне добавит уникальный id к каждому изображению из цикла и передать его в js?

Comments

[Everything_is_bad]

1. джанго тут вообще не при чем
2. знания того что id должно быть уникальным, это баз html и js

решил писать фонтенд начни с изучения базовых вещей в нем

Answer 1

[san7667]

HTML:

{% for item ib images %}
 <td><img src="{{ item.image }}" alt="" class="image" data-id="{{ item.id }}"></td> 
{% endfor %}

JS:

let images = document.querySelectorAll('.image');
let modal = document.querySelector('.modal');
let modalImg = document.querySelector('.modal-content');
let modalClose = document.querySelector('.close');
var captionText = document.getElementById("caption");
for (let img of images) {
  img.addEventListener('click', () => {
    let id = img.getAttribute('data-id');
    modalImg.src = images[id - 1].src;
    modal.style.display = 'block';
    captionText.innerHTML = img.getAttribute('alt');
  });
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() { modal.style.display = "none";}