Как правильно расположить {% for i in iterable%} ... {% endif %} в шаблоне DJANGO3.0?

Задача: на странице рендерятся записи из БД, рядом с каждой кнопка модального окна, в котором должны быть Подробности из бд по соответствующей записи. схематически так:

{% for item in work_exp %}
...html код..
{{ item.description }}
...html код..
{% endfor %}

То есть это одна Модель, которая разбирается и на страницу и на модальные окна.

Проблема:
Записи рендерятся корректно, а в модальных окнах у всех записей отображаются Подробности первой, хотя весь блок выполняется в одном цикле for. как правильно расставить цикл?

Полный код далее...

base.html

...
<div class="container">
#НАЧАЛО ЦИКЛА
      {% for item in work_exp %}
      <tr>
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <div class="post-preview">
          <a href="#" style="text-decoration: none; color: black;">
            <h4 class="post-title">
# РЕНДЕР ЗАПИСИ
              {{ item.position }} - "{{ item.company_name }}"
            </h4>
            <p class="post-meta">Период работы: с
                    {{ item.start_date }}
                  {% if item.end_date %}
                    по {{ item.end_date }}
                  {% else %}
                    по настоящее время
                  {% endif %}
          </a>
              <!-- Button trigger modal -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                  Подробнее
              </button>

              <!-- Modal -->
              <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                      <div class="modal-content">
                          <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">{{ job.position }}</h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
# РЕНДЕР ПОДРОБНОСТЕЙ В МОДАЛЬНОМ ОКНЕ
                              <p>{{ item.company_name }}</p>
                              <p>{{ item.description }}</p>
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                          </div>
                      </div>
                  </div>
              </div>
                <hr>
          </div>
        </tr>
    </div>
</div>
{% endfor %}
</div>

models.py

class WorkingExperience(models.Model):
    company_name = models.CharField(max_length=255, verbose_name='Место работы')
    position = models.CharField(max_length=300, verbose_name='Должность')
    start_date = models.DateField(verbose_name='Начало работы')
    end_date = models.DateField(
            verbose_name='Окончание работы',
            null=True,
            blank=True,
            help_text='Оставьте поле пустым чтобы получить значение "По настоящее время"',
        )
    description = models.TextField(verbose_name='Описание обязанностей')
    company_web_address = models.CharField(max_length=100, verbose_name='Сайт компании', null=True, blank=True)

SELECT из БД на всякий введите сюда описание изображения

views.py

class BaseView(View):

    def get(self, request, *args, **kwargs):
        work_exp = WorkingExperience.objects.all()
        context = {'work_exp': work_exp}
        return render(request, 'base.html', context)

А в результате во всех модалках Подробности первой записи... введите сюда описание изображения


Ответы (0 шт):