data id iteration django - django

Question

I really do not know how to iterate through my loop to display individual items. I have tried to
rearrange the loop but has worked. The data id id="portfolioModal" is what I want to also iterate for individual items.
{% for subjects in object %}
<div class="portfolio-modal modal fade" id="portfolioModal" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fas fa-times"></i>
</span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title -->
<h2 class="portfolio-modal-title text-success text-uppercase mb-0">{{subjects.title}}</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image -->
<img class="img-fluid rounded-circle mb-5" src=" {{subjects.img.url}}" alt="">
<!-- Portfolio Modal - Text -->
<p>{{subjects.desc}}</p>
<button class="btn btn-danger" href="#" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}

Answer 1

If you want to iterate just numbers in the loop, you can use the {{ forloop.counter }}, like this:
{% for subjects in object %}
<div class="portfolio-modal modal fade" id="portfolioModal-{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true">
...
{% endfor %}
In the for loop inside your template code, ever single object of your the context "object" variable is named "subjects", like you know. So, If you want iterate your div id using a object attribute (suppose object.id), just call it by {{ subjects.id }}:
{% for subjects in object %}
<div class="portfolio-modal modal fade" id="portfolioModal-{{ subjects.id }}" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true">
...
{% endfor %}
When this page is rendered,this will print a simple id=portfolioModal-1, id=portfolioModal-2, id=portfolioModal-3... where numbers are the objects ids