1👍
✅
That’s because you have data-target="#myModal"
and below you have <div class="modal fade" id="myModal"...
for each image.
So, each div
has the same id
. In order to work, you should make that unique for each image. Like this:
data-target="#myModal-{{ forloop.counter }}"> <!-- this will become #myModal-1 #myModal-2 #myModal-3 etc -->
and
<div class="modal fade" id="myModal-{{ forloop.counter }}" ... <!-- this will become myModal-1 myModal-2 myModal-3 etc -->
Source:stackexchange.com