Python Jinja用于循环与侧边栏动作

我正在尝试制作一个简单的todo/任务跟踪器。我有一个显示所有任务及其相应信息的表。我希望用户能够点击编辑，并有一个边栏，其中包含一个表单，允许用户编辑任务。表单位于遍历任务的for循环中。但是，任何任务的侧栏仅显示第一个任务信息。请参阅下面我的代码：

table id="myTable" class="table-auto border-collapse w-full" style="height: 100% !important;" >
      <thead>
        <tr class="rounded-lg text-sm font-medium font-normal text-gray-700 text-left" style="font-size: 0.9674rem; ">
          <th width="30%" id="th-sm" class="px-4 py-2 bg-gray-200" style="background-color:#FAFAFA;font-weight: 500;">Task Name <img style="display: inline-block; opacity: 0.5;" src="https://img.icons8.com/material-sharp/12/000000/sort.png"/></th>
          <th id="th-sm" class="px-4 py-2 bg-gray-200;" style="background-color:#FAFAFA;font-weight: 500;">Status/Progress <img style="display: inline-block; opacity: 0.5;" src="https://img.icons8.com/material-sharp/12/000000/sort.png"/></th>
          <th id="th-sm" class="px-4 py-2 bg-gray-200;;" style="background-color:#FAFAFA;font-weight: 500;">Due Date <img style="display: inline-block; opacity: 0.5; " src="https://img.icons8.com/material-sharp/12/000000/sort.png"/></th>
          <th id="th-sm" class="px-4 py-2 bg-gray-200 " style="background-color:#FAFAFA;font-weight: 500;">Time Logged <img style="display: inline-block; opacity: 0.5;" src="https://img.icons8.com/material-sharp/12/000000/sort.png"/></th>
          <th id="th-sm" class="px-4 py-2 bg-gray-200 " style="background-color:#FAFAFA;font-weight: 500;">Task Lead <img style="display: inline-block; opacity: 0.5;" src="https://img.icons8.com/material-sharp/12/000000/sort.png"/></th>
          <th width="auto" id="th-sm" class="px-4 py-2 bg-gray-200 " style="background-color:#FAFAFA;font-weight: 500;"></th>
        </tr>
      </thead>
      <tbody class="text-sm font-normal text-gray-700">
        {% for todo in update_todo %}
        <tr class="hover:bg-gray-100 border-b border-gray-200 py-10">
          <td class="px-4 py-4" style="font-size:1rem; font-weight: 600;" onclick="openNav_details()">{{todo['taskname']}}</td>

          <td class="px-4 py-4">
            <div class="relative pt-1">
              <div class="flex mb-2 items-center justify-between">
                <div>
                  <span class="text-xs inline-block text-gray-600">
                    {{todo['taskprogress']}}
                  </span>
                </div>
              </div>
              <div class="h-2 mb-4 text-xs flex rounded bg-gray-200">
                <div style="{{todo['taskprogress']}}" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-gray-500"></div>
              </div>
            </div>
        </td>

          <td class="px-4 py-4">{{todo['completedate'][0:10]}}</td>
       
          <td class="px-4 py-4" >25h 18m
          </td>
        
          <td class="px-4 py-4">{{todo['assignee']}}</td>
  
          <td class="px-4 py-4">
          <div class="dropdown inline-block relative">
            <button class="text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
              <span class="mr-1"><img src="https://img.icons8.com/small/16/000000/more.png"/></span>
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/> </svg>
            </button>
            <ul class="dropdown-menu absolute hidden text-gray-700 pt-1 shadow-none" style="width: automatic !important;">
              <li class=""><a class="py-2 px-4 block" href="{{ url_for('main_bp.move_task', projectid=projectid, task_id=todo['id'], category='Complete') }}">Complete</a></li>
              <li class=""><a class="py-2 px-4 block" onclick="openNav()" href="#">Edit</a></li>
              <li class=""><a class="py-2 px-4 block" href="{{ url_for('main_bp.delete_task', projectid=projectid, task_id=todo['id']) }}">Delete</a></li>
            </ul>
          </div>
          <style>
            .dropdown:hover .dropdown-menu {
              display: block;
              background-color: white;
              width: 100% !important;
              color: #454545 !important;
              }
        </style>
        </td>

table id=“myTable”class=“table自动边框折叠w-full”style=“高度：100%”重要；“>
任务名称
现状/进展
到期日
记录时间
任务领导
{更新中todo的百分比为\u todo%}
{{todo['taskname']}
{{todo['taskprogress']}
{{todo['completedate'][0:10]}
25小时18米
{{todo['受让人]}





.下拉菜单：悬停.下拉菜单{
显示：块；
背景色：白色；
宽度：100%！重要；
颜色：#4545！重要；
}

我的边栏表单

        <div id="mySidenav" class="sidenav2">
          <h2 onclick="closeNav_edit()">close</h2>
          <div class="modal-body">
          <form method="post" action="{{ url_for('main_bp.edit_task', projectid = projectid, task_id=todo['id']) }}">
            <div class="form-group">
              <h3>{{todo['taskname']}}</h3>
              <input style="display: none;" type="text" class="form-control" id="taskname" name="taskname" value="{{todo['taskname']}}">
              <input style="display: none;" type="text" class="form-control" id="taskname" name="taskcategory" value="{{todo['category']}}">
              <input style="display: none;" type="text" class="form-control" id="taskname" name="assignee" value="{{todo['assignee']}}">
              <hr>
            </div>
            <div class="form-group">
              <label for="completedate">Status/Progress</label>
              <select class="form-control" id="taskcategory" name="taskprogress" required>
                <option value="0%">0%</option>
                <option value="25%">25%</option>
                <option value="50%">50%</option>
                <option value="75%">75%</option>
                <option value="100%">100%</option>
              </select>
            </div>
            <div class="form-group">
              <label for="completedate">Due Date</label>
              <input required class="form-control" type="date" id="completedate" value="{{todo['completedate']}}"name="completedate">
            </div>
            <div class="form-group" style="display: none;">
              <label for="completedate">projectid</label>
              <input class="form-control" id="projectid" name="projectid" value="{{projectid}}">
            </div>
            <div class="form-group">
              <label for="taskcategory">Task Lead</label>
              <select class="form-control" id="taskcategory" name="assignee">
                <option value="{{todo['assignee']}}" disabled selected>{{todo['assignee']}}</option>
                {% for team_member in team_members %}
                <option value="{{team_member}}">{{team_member}}</option>
                {% endfor  %}
              </select>
            </div>
            <div class="form-group">
              <label for="taskcategory">Task Description</label>
              <textarea class="form-control" id="projectid" name="taskdescription" value="{{projectid}}">{{todo['taskdescription']}}</textarea>
              <script>
                tinymce.init({
                  selector: "textarea",
                  menubar : false,
                  statusbar:false,
                });
              </script>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
        {% endfor %} 
      </tbody>
    </table>

关闭
{{todo['taskname']}

现状/进展
0%
25%
50%
75%
100%
到期日
投射
任务领导
{{todo['受让人]}
{team_members%}
{{团队成员}
{%endfor%}
任务描述
{{todo['taskdescription']}
tinymce.init({
选择器：“文本区域”，
梅努巴：错，
状态栏：false，
});
提交
{%endfor%}

我的CSS和JS

<script>
           function openNav() {
            document.getElementById("mySidenav").style.width = "45%";
        }
        
        function closeNav_edit() {
            document.getElementById("mySidenav").style.width = "0";
        }
<script>
<style>
           .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;}
        }
         </style>

函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“45%”；
}
函数closeNav_edit（）{
document.getElementById（“mySidenav”）.style.width=“0”；
}
.sidenav2{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
右：0；
背景色：白色；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.sidenav2 a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.sidenav2 a:悬停，.offcanvas a:焦点{
颜色：#f1f1；
}
.sidenav2.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav2{填充顶部：15px；}
.sidenav2 a{字体大小：18px；}
}

所以，我解决了这个问题。对于将来有类似问题的人

我必须将我的边栏id设置为动态id。我将边栏id设置为任务的id。i、 e.{{todo.id}。我面临这个问题是因为身份证是一样的。这是我的固定代码：

        <div id='{{todo.id}}' class="sidenav2">
      <h2 onclick="closeNav_edit()">close</h2>
      <div class="modal-body">
      <form method="post" action="{{ url_for('main_bp.edit_task', projectid = projectid, task_id=todo['id']) }}">
        <div class="form-group">
          <h3>{{todo['taskname']}}</h3>
          <input style="display: none;" type="text" class="form-control" id="taskname" name="taskname" value="{{todo['taskname']}}">
          <input style="display: none;" type="text" class="form-control" id="taskname" name="taskcategory" value="{{todo['category']}}">
          <input style="display: none;" type="text" class="form-control" id="taskname" name="assignee" value="{{todo['assignee']}}">
          <hr>
        </div>
        <div class="form-group">
          <label for="completedate">Status/Progress</label>
          <select class="form-control" id="taskcategory" name="taskprogress" required>
            <option value="0%">0%</option>
            <option value="25%">25%</option>
            <option value="50%">50%</option>
            <option value="75%">75%</option>
            <option value="100%">100%</option>
          </select>
        </div>
        <div class="form-group">
          <label for="completedate">Due Date</label>
          <input required class="form-control" type="date" id="completedate" value="{{todo['completedate']}}"name="completedate">
        </div>
        <div class="form-group" style="display: none;">
          <label for="completedate">projectid</label>
          <input class="form-control" id="projectid" name="projectid" value="{{projectid}}">
        </div>
        <div class="form-group">
          <label for="taskcategory">Task Lead</label>
          <select class="form-control" id="taskcategory" name="assignee">
            <option value="{{todo['assignee']}}" disabled selected>{{todo['assignee']}}</option>
            {% for team_member in team_members %}
            <option value="{{team_member}}">{{team_member}}</option>
            {% endfor  %}
          </select>
        </div>
        <div class="form-group">
          <label for="taskcategory">Task Description</label>
          <textarea class="form-control" id="projectid" name="taskdescription" value="{{projectid}}">{{todo['taskdescription']}}</textarea>
          <script>
            tinymce.init({
              selector: "textarea",
              menubar : false,
              statusbar:false,
            });
          </script>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
    {% endfor %} 
  </tbody>
</table>

关闭
{{todo['taskname']}

现状/进展
0%
25%
50%
75%
100%
到期日
投射
任务领导
{{todo['受让人]}
{team_members%}
{{团队成员}
{%endfor%}
任务描述
{{todo['taskdescription']}
tinymce.init({
选择器：“文本区域”，
梅努巴：错，
状态栏：false，
});
提交
{%endfor%}