title: Django For-Loop and Div ID
body: <p>I am trying to loop through a portfolio but hitting a snag. I am using Bootstrap and would like to use Modal light box for images. I am having an issue looping through a div that would allow my lightbox to have an absolute_url. When I loop through urls are changing but when you click the image to bring up the light box it is only pulling the first div because of the div id. I am not a java or jquery guy only know django and python and stumped. </p>
  
  <p>index.html</p>
  
  <pre><code>    &lt;section id="three" class="no-padding"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row no-gutter"&gt;
          {% for sites in portfolio %}
              &lt;div class="col-lg-4 col-sm-6"&gt;
                  &lt;a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="{{sites.image.url}}"&gt;
                      &lt;img src="{{sites.image.url}}" class="img-responsive" alt="Image 1"&gt;
                      &lt;div class="gallery-box-caption"&gt;
                          &lt;div class="gallery-box-content"&gt;
                              &lt;div&gt;
                                  &lt;i class="icon-lg ion-ios-search"&gt;&lt;/i&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="galleryModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"&gt;
                  &lt;div class="modal-dialog modal-lg"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;img src="//placehold.it/1200x700/222?text=..." id="galleryImage" class="img-responsive" /&gt;
                          &lt;p&gt;
                              &lt;br/&gt;
                              &lt;a href="{{ sites.get_absolute_url }}"&gt;&lt;button class="btn btn-primary btn-lg" aria-hidden="true"&gt;View Details &lt;i class="ion-document"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;
                              &lt;button class="btn btn-primary btn-lg" data-dismiss="modal" aria-hidden="true"&gt;Close &lt;i class="ion-android-close"&gt;&lt;/i&gt;&lt;/button&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              {% endfor %}
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>views.py</p>
  
  <pre><code>def home(request):
  about = About.objects.latest('timestamp')
  concepts = Concept.objects.order_by('?')[:3]
  portfolio = Portfolio.objects.all()[:6]
  template = "index.html"
  context = {
      "about": about,
      "concepts": concepts,
      "portfolio": portfolio,
  }
  return render(request, template, context)
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$('#galleryModal').on('show.bs.modal', function (e) {
     $('#galleryImage').attr("src",$(e.relatedTarget).data("src"));
  });
  </code></pre>