title: bootstrap django using collapse within a for loop
body: <p>I'm iterating through the event_list and want to display info for each entry. But my <code>html</code> only shows the first entry despite whatever entry I click on. i.e If i click on <code>green event</code> it expands the <code>my wedding</code> <code>card-body</code>. I want it to expand separate event details for each separate entry. How do I do that?</p>
  
  <blockquote>
    <p><code>index.html</code></p>
  </blockquote>
  
  <pre><code>{% extends 'event/eventAdminBase.html' %}
  {% load static %}
  
  {% block content %}
  {% if event_list %}
  
  
  {% for events in event_list %}
  
  &lt;div id="accordion"&gt;
  
  
      &lt;div class="card"&gt;
  
          &lt;div class="card-header" id="headingOne"&gt;
              &lt;h5 class="mb-0"&gt;
                  &lt;button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false"
                          aria-controls="collapseOne"&gt;
                      Event Name :{{ events.event_name }}
                  &lt;/button&gt;
              &lt;/h5&gt;
          &lt;/div&gt;
  
          &lt;div id="collapseOne" class="collapse " aria-labelledby="headingOne" data-parent="#accordion"&gt;
              &lt;div class="card-body"&gt;
  
                  &lt;ul&gt;
  
                      &lt;li&gt;
  
                          &lt;p&gt; Event Name :{{ events.event_name }}&lt;/p&gt;
                          &lt;p&gt;Venue:${{ events.event_venue }}&lt;/p&gt;
                          &lt;p&gt;Type:{{ events.event_type }} &lt;/p&gt;
                          &lt;form action="{% url 'event:event-delete' events.id %}" method="post" style="display: inline;"&gt;
                              {% csrf_token %}
                              &lt;button type="submit" class="btn btn-default btn-sm"&gt;Delete&lt;/button&gt;
                          &lt;/form&gt;
                          &lt;form action="{% url 'event:event-update' events.id %}" method="post" style="display: inline;"&gt;
                              {% csrf_token %}
                              &lt;button type="submit" class="btn btn-default btn-sm"&gt;Update&lt;/button&gt;
                          &lt;/form&gt;
  
  
                      &lt;/li&gt;
  
  
                  &lt;/ul&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  {% endfor %}
  
  
  {% else %}
  &lt;h1&gt;No event entries found on the database.&lt;/h1&gt;
  
  
  {% endif %}
  
  {% endblock %}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/HStiN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HStiN.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>This is what i want </p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/dkkfi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dkkfi.png" alt="This is what i want"></a></p>
  
  <blockquote>
    <p><code>urls.py</code></p>
  </blockquote>
  
  <pre><code>from django.conf.urls import url
  
  from event import views
  
  app_name = 'event'
  
  urlpatterns = [
  
      # /event/
      url(r'^$', views.IndexView.as_view(), name='index'),
  
      # event/event/entry
      url('event/entry/$', views.EventEntry.as_view(), name='event-entry'),
  
      # event/product/2
      url(r'^event/(?P&lt;pk&gt;[0-9]+)/$', views.EventUpdate.as_view(), name='event-update'),
  
      # event/product/(?P&lt;pk&gt;[0-9]+)/delete
      url(r'^album/(?P&lt;pk&gt;[0-9]+)/delete$', views.EventDelete.as_view(), name='event-delete'),
  
  ]
  </code></pre>
  
  <blockquote>
    <p><code>views.py</code></p>
  </blockquote>
  
  <pre><code>from django.views import generic
  from django.views.generic.edit import CreateView, UpdateView, DeleteView
  
  from django.urls import reverse_lazy
  # Create your views here.
  from event.models import Event
  
  
  # view for the index page
  class IndexView(generic.ListView):
      # name of the object to be used in the index.html
      context_object_name = 'event_list'
      template_name = 'event/index.html'
  
      def get_queryset(self):
          return Event.objects.all()
  
  
  # view for the event entry page
  class EventEntry(CreateView):
      model = Event
      # the fields mentioned below become the entry rows in the generated form
      fields = ['event_name', 'event_venue', 'event_type']
  
  
  # view for the event update page
  class EventUpdate(UpdateView):
      model = Event
      # the fields mentioned beindexlow become the entyr rows in the update form
      fields = ['event_name', 'event_venue', 'event_type']
  
  
  # view for deleting a event entry
  class EventDelete(DeleteView):
      model = Event
      # the delete button forwards to the url mentioned below.
      success_url = reverse_lazy('event:index')
  </code></pre>
  
  <p>edit : is there any way to manipulate the <code>html</code> with <code>{{ forloop.counter }}</code>? </p>