Javascript 我有一个表格，每行有一个按钮，显示一个表单。无论单击“编辑”按钮，确认表单始终会更改第一个条目

我会在开场白中说我是一个彻头彻尾的noob，这是一个在线课程项目的一部分。我99%确信这里的一些代码要么格式糟糕，要么不符合最佳实践

以下是HTML页面与表格的相关部分：

    <form action="/timers" method="post">
        <div class="form-group">
            <input id="newTimerName" autocomplete="off" autofocus class="form-control" name="newTimerName" placeholder="New Timer" type="text" onkeyup="enableButton()">
            <br>
        </div>
        <button id="submit" name="submit" class="btn btn-primary" type="submit" disabled>Add Timer</button>
    </form>
    <br>
    <table id="editTimers" name="editTimers" class="table table-striped">
        <thead class="thead-dark">
            <tr id="header_row">
               <th scope="col">
                   Edit
               </th>
               <th scope="col">
                   Timer
               </th>
               <th scope="col">
                   Total Time Elapsed
               </th>
               <th scope="col">
                   Delete
               </th>
            </tr>
        </thead>
        {% for timer in timers %}
            <tr id="row_{{ loop.index0 }}" name="row">
                <td id="edit_row_{{ loop.index0 }}" name="edit" scope="row">
                    <button class="btn btn-primary" id="edit_{{ loop.index0 }}" name="edit" onclick="openForm()">Edit</button>
                    <div class="form-popup" id="editForm">
                        <form action="/edit_timer" class="form-container" method="post">
                            <label for="oldTimerName"><b>{{ timer["timer"] }}</b></label>
                            <input hidden name="oldTimerName" value="{{ timer["timer"] }}">

                            <label for="changeTimerName"><b hidden>New Timer Name</b></label>
                            <input type="text" placeholder="New Timer Name" name="changeTimerName" required>

                            <button type="submit" class="btn" id="submit_edit_{{ loop.index0 }}" name="submitEdit">Edit</button>
                            <button class="btn cancel" id="cancel_{{ loop.index0 }}" name ="cancel"  onclick="closeForm()">Cancel</button>
                        </form>
                    </div>
                </td>
                <form action="/delete_timer" method="post">
                    <td id="timer_name_row_{{ loop.index0 }}" name="timer_name" scope="row">
                        <label for="inputTimerName">{{ timer["timer"] }}</label>
                        <input hidden id"inputTimerName" name="inputTimerName" value="{{ timer["timer"] }}">
                    </td>
                    <td id="total_time_row_{{ loop.index0 }}" name="total_time" scope="row">
                        {{ timer["total_time"] }}
                    </td>
                    <td id="delete_row_{{ loop.index0 }}" name="delete" scope="row">
                        <button id="delete_{{ loop.index0 }}" name ="delete" class="btn btn-primary" type="submit">Delete</button>
                    </td>
                </form>
            </tr>
        {% endfor %}
    </table>

以及python文件，使用flask：

@app.route("/timers", methods=["GET", "POST"])
@login_required
def timers():
    """Manage Timers"""
    if request.method == "POST":

        # if adding new timer
        timerName = request.form.get("newTimerName")
        db.execute("INSERT INTO timers (user_id, timer) VALUES (:id, :timer)",
                    id=session["user_id"], timer=timerName)
        # then reload page

    timers = db.execute("SELECT * FROM timers WHERE user_id = :id", id=session["user_id"])
    for row in timers:
        row["total_time"] = formatTime(row["total_time"])
    return render_template("timers.html", timers=timers)

@app.route("/delete_timer", methods=["POST"])
@login_required
def delete_timer():
    """Delete Timer"""
    if request.method == "POST":
        timer = request.form.get("inputTimerName")
        db.execute("DELETE FROM timers WHERE user_id = :id AND timer = :timer",
                    id=session["user_id"], timer=timer)

    # reload page
    timers = db.execute("SELECT * FROM timers WHERE user_id = :id", id=session["user_id"])
    for row in timers:
        row["total_time"] = formatTime(row["total_time"])
    return render_template("timers.html", timers=timers)

@app.route("/edit_timer", methods=["POST"])
@login_required
def edit_timer():
    """Edit Timer"""
    if request.method == "POST":
        oldTimer = request.form.get("oldTimerName")
        newTimer = request.form.get("changeTimerName")
        db.execute("UPDATE timers SET timer = :newTimer WHERE user_id = :id and timer = :oldTimer", newTimer=newTimer, id=session["user_id"], oldTimer=oldTimer)

    # reload page
    timers = db.execute("SELECT * FROM timers WHERE user_id = :id", id=session["user_id"])
    for row in timers:
        row["total_time"] = formatTime(row["total_time"])
    return render_template("timers.html", timers=timers)

您将看到在for循环中显示每一行是一个链接到每个编辑按钮的弹出表单

我假设问题在于，无论单击哪个编辑按钮，弹出表单都有一个保持不变的id。当它们显示时，它会显示正确的文本值，因此我不确定它为什么不向sql查询提交相应的值。不管“编辑/表单”按钮如何，sql查询始终以第一行的文本值结束

我认为将ID更改为包含索引编号会有所帮助，但我不确定如何将索引编号同时传递给javascript和flask文件

任何帮助都将不胜感激

提前谢谢

@app.route("/timers", methods=["GET", "POST"])
@login_required
def timers():
    """Manage Timers"""
    if request.method == "POST":

        # if adding new timer
        timerName = request.form.get("newTimerName")
        db.execute("INSERT INTO timers (user_id, timer) VALUES (:id, :timer)",
                    id=session["user_id"], timer=timerName)
        # then reload page

    timers = db.execute("SELECT * FROM timers WHERE user_id = :id", id=session["user_id"])
    for row in timers:
        row["total_time"] = formatTime(row["total_time"])
    return render_template("timers.html", timers=timers)

@app.route("/delete_timer", methods=["POST"])
@login_required
def delete_timer():
    """Delete Timer"""
    if request.method == "POST":
        timer = request.form.get("inputTimerName")
        db.execute("DELETE FROM timers WHERE user_id = :id AND timer = :timer",
                    id=session["user_id"], timer=timer)

    # reload page
    timers = db.execute("SELECT * FROM timers WHERE user_id = :id", id=session["user_id"])
    for row in timers:
        row["total_time"] = formatTime(row["total_time"])
    return render_template("timers.html", timers=timers)

@app.route("/edit_timer", methods=["POST"])
@login_required
def edit_timer():
    """Edit Timer"""
    if request.method == "POST":
        oldTimer = request.form.get("oldTimerName")
        newTimer = request.form.get("changeTimerName")
        db.execute("UPDATE timers SET timer = :newTimer WHERE user_id = :id and timer = :oldTimer", newTimer=newTimer, id=session["user_id"], oldTimer=oldTimer)

    # reload page
    timers = db.execute("SELECT * FROM timers WHERE user_id = :id", id=session["user_id"])
    for row in timers:
        row["total_time"] = formatTime(row["total_time"])
    return render_template("timers.html", timers=timers)