Q:

All accordions opening at once using Django

This is a really silly question, but I can't find the answer anywhere!
I have a for loop & for each item, it creates an accordion as below.
The problem is, the accordion always has the same ID, so when I toggle one to open, they all open.
How can I systematically assign each a different value, so they open independently? 
I have tried to name accordion divid like this:
<div id="accordion{{ todo.taskid}}">

But they still all open at once

   <tbody>
          {% for todo in todo_list %}
          {% if todo.complete is False %}
          <tr class="table">
      <td>{{ todo.taskid }}</td>
      <td>{{ todo.text }}</td>
      <td>{{ todo.complete }}</td>
      <td>{{ todo.creator }}</td>
      <td>{{ todo.assignee }}</td>
      {% if todo.priority == "High" %}
      <td class="table-danger">{{ todo.priority }}</td>
      {% elif todo.priority == "Medium"  %}
      <td class="table-warning">{{ todo.priority }}</td>
{% else %}
      <td class="table-info">{{ todo.priority }}</td>

      {% endif %}
      <td>{{ todo.due }}</td>
      <td>
              <form action="/viewnote/" name="form1", id="form1" method="post">
                      {% csrf_token %}
                      <button name="viewnote" type="submit"  value={{ todo.taskid }}  class="btn btn-info">Notes</button></form></td>
<th scope="col"><form action="/complete/" name="form2", id="form2" method="post">
                      {% csrf_token %}
                      <button name="donebutton" type="submit"  value={{ todo.taskid }}  class="btn btn-success">Done</button></th>
                      </form>
      <th scope="col"><form action="/delete/" name="form1", id="form1" method="post">
                      {% csrf_token %}
                      <button name="deletebutton" type="submit"  value={{ todo.taskid }}  class="btn btn-danger">Delete</button></th></form>

          </tr>
          <tr>
                  <td colspan="5">
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <font color="black">Add Task Notes</font>
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
                       <form action="/addnote/" name="form1", id="form1" method="post">
                      {% csrf_token %}
                       <div class="form-group">
    <textarea name="note" class="form-control" id="exampleFormControlTextarea1" rows="2"></textarea>
  </div>
  <div class="form-group">
          <input type="text" name="noteid"  class="form-control" id="noteid" aria-describedby="emailHelp" placeholder="Enter Note ID">
  </div>
  <div align="right">

                  <button name="addnote" type="submit"  value={{ todo.taskid }}  class="btn btn-secondary">add note</button>
                      </form>
                  </div></div></div>

</div>

              </td>

              <td colspan="5">
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <font color="black">Edit Task</font>
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
      <form action="/update/" name="form1", id="form1" method="post">
        {% csrf_token %}
   <div class="form-group">
           <select name="assignee" class="form-control" id="exampleFormControlSelect1">
      <option>Select Assignee</option>
      <option>kikee</option>
      <option>kieran</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

  <div class="form-group">
           <select name="priority" class="form-control" id="exampleFormControlSelect1">
      <option>Select Priority</option>
      <option>High</option>
      <option>Medium</option>
      <option>Low</option>
    </select>
  </div>
   <div class="form-group">
          <input type="text" name="due"  class="form-control" id="task" aria-describedby="emailHelp" placeholder="Due Date YYYYMMDD">
   </div>

           <button type="submit"  name="editbutton" value={{ todo.taskid }} class="btn btn-warning">Edit Task</button>
</form>

      </div></div></div>

</div>

              </td>
    </div></div></div>

</div>

<!--                      <form action="/addnote/" name="form1", id="form1" method="post">
                      {% csrf_token %}
                       <div class="form-group">
    <textarea name="note" class="form-control" id="exampleFormControlTextarea1" rows="2"></textarea>
  </div>
  <div class="form-group">
          <input type="text" name="noteid"  class="form-control" id="noteid" aria-describedby="emailHelp" placeholder="Enter Note ID">
  </div>
  <div align="right">
  <table>
          <td>
                  <button name="addnote" type="submit"  value={{ todo.taskid }}  class="btn btn-secondary">add note</button>
                      </form></td><td>
              <form action="/viewnote/" name="form1", id="form1" method="post">
                      {% csrf_token %}
                      <button name="viewnote" type="submit"  value={{ todo.taskid }}  class="btn btn-info">view notes</button></td> </table>
              </th>
              </form>-->
                          </td>

          </tr>
         {% endif %}
  {% endfor %}
  </tbody>

A:

You can assign a unique attribute value like todo.id on each accordion item.
for that change your accordion id in html to accordion{{todo.id}}. Change it in this like this:
<div id="accordion{{todo.id}}">
....

add {{todo.id}} to any section of html that you want to be different on each iteration.

