title: Using Jinja2 (flask) to loop through a bootstrap accordian
body: <p>I am using an accordian, with the default as collapsed. When I run my program everything is collapsed, so ok on that part. However, when I try to click one one and show its contents it only un-collapses the first accordian item.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>{% block content %}
      {% for dict_item in intel %}
          &lt;div id="accordion" role="tablist"&gt;
            &lt;div class="card"&gt;
              &lt;div class="card-header" role="tab" id="headingOne"&gt;
                &lt;h5 class="mb-0"&gt;
                  &lt;a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;
                    {{ dict_item['name']}} -- {{ dict_item['date'] }}
                  &lt;/a&gt;
                &lt;/h5&gt;
              &lt;/div&gt;
  
              &lt;div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion"&gt;
                &lt;div class="card-body"&gt;
                My Stuff in here
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      {% endfor %}
  </code></pre>
  
  <p>I image it has to do with the id/classes in the html but I am more of a backend guy so I am not an html wizard.</p>
  
  <p>Also, I am using v4 of bootstrap.</p>