title: Jinja for loop acting up with sidebar
body: <p>I am attempting to make a simple todo/task tracker. I have a table that displays all the tasks and their corresponding information. I would like the user to be able to click edit and have a sidebar that contains a form allowing the user to edit the task. The form is inside the for loop that goes over the tasks. However, the sidebar for any task only shows the first tasks information. Please see my code below:</p>
  <pre><code>table id=&quot;myTable&quot; class=&quot;table-auto border-collapse w-full&quot; style=&quot;height: 100% !important;&quot; &gt;
        &lt;thead&gt;
          &lt;tr class=&quot;rounded-lg text-sm font-medium font-normal text-gray-700 text-left&quot; style=&quot;font-size: 0.9674rem; &quot;&gt;
            &lt;th width=&quot;30%&quot; id=&quot;th-sm&quot; class=&quot;px-4 py-2 bg-gray-200&quot; style=&quot;background-color:#FAFAFA;font-weight: 500;&quot;&gt;Task Name &lt;img style=&quot;display: inline-block; opacity: 0.5;&quot; src=&quot;https://img.icons8.com/material-sharp/12/000000/sort.png&quot;/&gt;&lt;/th&gt;
            &lt;th id=&quot;th-sm&quot; class=&quot;px-4 py-2 bg-gray-200;&quot; style=&quot;background-color:#FAFAFA;font-weight: 500;&quot;&gt;Status/Progress &lt;img style=&quot;display: inline-block; opacity: 0.5;&quot; src=&quot;https://img.icons8.com/material-sharp/12/000000/sort.png&quot;/&gt;&lt;/th&gt;
            &lt;th id=&quot;th-sm&quot; class=&quot;px-4 py-2 bg-gray-200;;&quot; style=&quot;background-color:#FAFAFA;font-weight: 500;&quot;&gt;Due Date &lt;img style=&quot;display: inline-block; opacity: 0.5; &quot; src=&quot;https://img.icons8.com/material-sharp/12/000000/sort.png&quot;/&gt;&lt;/th&gt;
            &lt;th id=&quot;th-sm&quot; class=&quot;px-4 py-2 bg-gray-200 &quot; style=&quot;background-color:#FAFAFA;font-weight: 500;&quot;&gt;Time Logged &lt;img style=&quot;display: inline-block; opacity: 0.5;&quot; src=&quot;https://img.icons8.com/material-sharp/12/000000/sort.png&quot;/&gt;&lt;/th&gt;
            &lt;th id=&quot;th-sm&quot; class=&quot;px-4 py-2 bg-gray-200 &quot; style=&quot;background-color:#FAFAFA;font-weight: 500;&quot;&gt;Task Lead &lt;img style=&quot;display: inline-block; opacity: 0.5;&quot; src=&quot;https://img.icons8.com/material-sharp/12/000000/sort.png&quot;/&gt;&lt;/th&gt;
            &lt;th width=&quot;auto&quot; id=&quot;th-sm&quot; class=&quot;px-4 py-2 bg-gray-200 &quot; style=&quot;background-color:#FAFAFA;font-weight: 500;&quot;&gt;&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody class=&quot;text-sm font-normal text-gray-700&quot;&gt;
          {% for todo in update_todo %}
          &lt;tr class=&quot;hover:bg-gray-100 border-b border-gray-200 py-10&quot;&gt;
            &lt;td class=&quot;px-4 py-4&quot; style=&quot;font-size:1rem; font-weight: 600;&quot; onclick=&quot;openNav_details()&quot;&gt;{{todo['taskname']}}&lt;/td&gt;
  
            &lt;td class=&quot;px-4 py-4&quot;&gt;
              &lt;div class=&quot;relative pt-1&quot;&gt;
                &lt;div class=&quot;flex mb-2 items-center justify-between&quot;&gt;
                  &lt;div&gt;
                    &lt;span class=&quot;text-xs inline-block text-gray-600&quot;&gt;
                      {{todo['taskprogress']}}
                    &lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;h-2 mb-4 text-xs flex rounded bg-gray-200&quot;&gt;
                  &lt;div style=&quot;{{todo['taskprogress']}}&quot; class=&quot;shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-gray-500&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
  
            &lt;td class=&quot;px-4 py-4&quot;&gt;{{todo['completedate'][0:10]}}&lt;/td&gt;
         
            &lt;td class=&quot;px-4 py-4&quot; &gt;25h 18m
            &lt;/td&gt;
          
            &lt;td class=&quot;px-4 py-4&quot;&gt;{{todo['assignee']}}&lt;/td&gt;
    
            &lt;td class=&quot;px-4 py-4&quot;&gt;
            &lt;div class=&quot;dropdown inline-block relative&quot;&gt;
              &lt;button class=&quot;text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center&quot;&gt;
                &lt;span class=&quot;mr-1&quot;&gt;&lt;img src=&quot;https://img.icons8.com/small/16/000000/more.png&quot;/&gt;&lt;/span&gt;
                &lt;svg class=&quot;fill-current h-4 w-4&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot;&gt;&lt;path d=&quot;M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z&quot;/&gt; &lt;/svg&gt;
              &lt;/button&gt;
              &lt;ul class=&quot;dropdown-menu absolute hidden text-gray-700 pt-1 shadow-none&quot; style=&quot;width: automatic !important;&quot;&gt;
                &lt;li class=&quot;&quot;&gt;&lt;a class=&quot;py-2 px-4 block&quot; href=&quot;{{ url_for('main_bp.move_task', projectid=projectid, task_id=todo['id'], category='Complete') }}&quot;&gt;Complete&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;&quot;&gt;&lt;a class=&quot;py-2 px-4 block&quot; onclick=&quot;openNav()&quot; href=&quot;#&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;&quot;&gt;&lt;a class=&quot;py-2 px-4 block&quot; href=&quot;{{ url_for('main_bp.delete_task', projectid=projectid, task_id=todo['id']) }}&quot;&gt;Delete&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;style&gt;
              .dropdown:hover .dropdown-menu {
                display: block;
                background-color: white;
                width: 100% !important;
                color: #454545 !important;
                }
          &lt;/style&gt;
          &lt;/td&gt;
  </code></pre>
  <p>MY SIDEBAR FORM</p>
  <pre><code>        &lt;div id=&quot;mySidenav&quot; class=&quot;sidenav2&quot;&gt;
            &lt;h2 onclick=&quot;closeNav_edit()&quot;&gt;close&lt;/h2&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
            &lt;form method=&quot;post&quot; action=&quot;{{ url_for('main_bp.edit_task', projectid = projectid, task_id=todo['id']) }}&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                &lt;h3&gt;{{todo['taskname']}}&lt;/h3&gt;
                &lt;input style=&quot;display: none;&quot; type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;taskname&quot; name=&quot;taskname&quot; value=&quot;{{todo['taskname']}}&quot;&gt;
                &lt;input style=&quot;display: none;&quot; type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;taskname&quot; name=&quot;taskcategory&quot; value=&quot;{{todo['category']}}&quot;&gt;
                &lt;input style=&quot;display: none;&quot; type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;taskname&quot; name=&quot;assignee&quot; value=&quot;{{todo['assignee']}}&quot;&gt;
                &lt;hr&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;completedate&quot;&gt;Status/Progress&lt;/label&gt;
                &lt;select class=&quot;form-control&quot; id=&quot;taskcategory&quot; name=&quot;taskprogress&quot; required&gt;
                  &lt;option value=&quot;0%&quot;&gt;0%&lt;/option&gt;
                  &lt;option value=&quot;25%&quot;&gt;25%&lt;/option&gt;
                  &lt;option value=&quot;50%&quot;&gt;50%&lt;/option&gt;
                  &lt;option value=&quot;75%&quot;&gt;75%&lt;/option&gt;
                  &lt;option value=&quot;100%&quot;&gt;100%&lt;/option&gt;
                &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;completedate&quot;&gt;Due Date&lt;/label&gt;
                &lt;input required class=&quot;form-control&quot; type=&quot;date&quot; id=&quot;completedate&quot; value=&quot;{{todo['completedate']}}&quot;name=&quot;completedate&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group&quot; style=&quot;display: none;&quot;&gt;
                &lt;label for=&quot;completedate&quot;&gt;projectid&lt;/label&gt;
                &lt;input class=&quot;form-control&quot; id=&quot;projectid&quot; name=&quot;projectid&quot; value=&quot;{{projectid}}&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;taskcategory&quot;&gt;Task Lead&lt;/label&gt;
                &lt;select class=&quot;form-control&quot; id=&quot;taskcategory&quot; name=&quot;assignee&quot;&gt;
                  &lt;option value=&quot;{{todo['assignee']}}&quot; disabled selected&gt;{{todo['assignee']}}&lt;/option&gt;
                  {% for team_member in team_members %}
                  &lt;option value=&quot;{{team_member}}&quot;&gt;{{team_member}}&lt;/option&gt;
                  {% endfor  %}
                &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;taskcategory&quot;&gt;Task Description&lt;/label&gt;
                &lt;textarea class=&quot;form-control&quot; id=&quot;projectid&quot; name=&quot;taskdescription&quot; value=&quot;{{projectid}}&quot;&gt;{{todo['taskdescription']}}&lt;/textarea&gt;
                &lt;script&gt;
                  tinymce.init({
                    selector: &quot;textarea&quot;,
                    menubar : false,
                    statusbar:false,
                  });
                &lt;/script&gt;
              &lt;/div&gt;
              &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          {% endfor %} 
        &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  <p>MY CSS AND JS</p>
  <pre><code>&lt;script&gt;
             function openNav() {
              document.getElementById(&quot;mySidenav&quot;).style.width = &quot;45%&quot;;
          }
          
          function closeNav_edit() {
              document.getElementById(&quot;mySidenav&quot;).style.width = &quot;0&quot;;
          }
  &lt;script&gt;
  &lt;style&gt;
             .sidenav2 {
              height: 100%;
              width: 0;
              position: fixed;
              z-index: 1;
              top: 0;
              right: 0;
              background-color: white;
              overflow-x: hidden;
              transition: 0.5s;
              padding-top: 60px;
          }
          
          .sidenav2 a {
              padding: 8px 8px 8px 32px;
              text-decoration: none;
              font-size: 25px;
              color: #818181;
              display: block;
              transition: 0.3s;
          }
          
          .sidenav2 a:hover, .offcanvas a:focus{
              color: #f1f1f1;
          }
          
          .sidenav2 .closebtn {
              position: absolute;
              top: 0;
              right: 25px;
              font-size: 36px;
              margin-left: 50px;
          }
          
          @media screen and (max-height: 450px) {
            .sidenav2 {padding-top: 15px;}
            .sidenav2 a {font-size: 18px;}
          }
           &lt;/style&gt;
  </code></pre>