HTML form keep sending the same data to the flask even the values are changed

I am trying to code todo app in HTML and Flask. I tried to send dynamic table values to Flask with HTML but my HTML page keeps sending the same data even though the values are changed here is my code.

<form action="/tasks" method="POST">
<table contenteditable>
<thead>
<tr>
<th contenteditable="false">ID</th>
<th contenteditable="false">Title</th>
<th contenteditable="false">Description</th>
<th contenteditable="false">Status</th>
<th contenteditable="false">Deadline</th>
<th contenteditable="false">Due Date</th>
<th contenteditable="false">Task Type</th>
<th contenteditable="false">Update</th>
</tr>
</thead>
<tbody>
{% for task in data %}
<tr>
<td><input type="text"  name = "id" class = "form-control" id = "id" contenteditable = "false" value="{{ task.id }}" readonly></td>
<td><input class = "form-control" type="text" id="title" name="title_{{ task.id }}" value="{{ task.title }}"></td>
<td><input class = "form-control" type="text" id="description" name="description_{{ task.id }}" value="{{ task.description }}"></td>
<td><input class = "form-control" name ="status_{{ task.id }}" id = "status" value="{{ task.status }}" readonly></td>
<td><input class = "form-control" type="text" id="creation_time" name="creation_time_{{ task.id }}" value="{{ task.creation_time }}"></td>
<td><input class = "form-control" type="text" id="deadline" name="deadline_{{ task.id }}" value="{{ task.deadline }}"></td>
<td><input class = "form-control" type="text" id="task_type" name="task_type_{{ task.id }}" value="{{ task.task_type }}"></td>
<td>
<button type="submit">Update Row</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</form>

Here is my flask code

        title = request.form.get(f'title_{task_id}')
description = request.form.get(f'description_{task_id}')
status = request.form.get(f'status_{task_id}')
creation_time = request.form.get(f'creation_time_{task_id}')
deadline = request.form.get(f'deadline_{task_id}')
task_type = request.form.get(f'task_type_{task_id}')
print(title, file=sys.stderr)
print(description, file=sys.stderr)
print(task_id, file=sys.stderr)
print(status, file=sys.stderr)
ses_id = session['userid']
query = f"""
UPDATE Task
SET title='{title}', description='{description}', status='{status}', deadline='{deadline}', 
creation_time='{creation_time}',user_id='{ses_id}', 
task_type='{task_type}'
WHERE id= {task_id};
"""
print(query, file=sys.stderr)
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute(query)
mysql.connection.commit()

In this code I only get the values from id, title, description, status, deadline etc. from the first row which is my page looks like that

Only first row update button works and sends the data. second row update button does not send its data and sends first row's data only.

Why this is happening?

<form action="/tasks" method="POST">
            <table contenteditable>
                <thead>
                    <tr>
                  ...
                    </tr>
                </thead>
        
                <tbody>
                    {% for task in data %}
                        <tr>
                            <td><input type="text"  name = "id" class = "form-control" id = "id" contenteditable = "false" value="{{ task.id }}" readonly></td>
                            <td><input class = "form-control" type="text" id="title" name="title_{{ task.id }}" value="{{ task.title }}"></td>
                            <td><input class = "form-control" type="text" id="description" name="description_{{ task.id }}" value="{{ task.description }}"></td>
                            <td><input class = "form-control" name ="status_{{ task.id }}" id = "status" value="{{ task.status }}" readonly></td>
                            <td><input class = "form-control" type="text" id="creation_time" name="creation_time_{{ task.id }}" value="{{ task.creation_time }}"></td>
                            <td><input class = "form-control" type="text" id="deadline" name="deadline_{{ task.id }}" value="{{ task.deadline }}"></td>
                            <td><input class = "form-control" type="text" id="task_type" name="task_type_{{ task.id }}" value="{{ task.task_type }}"></td>
                            <td>
                                <button type="submit">Update Row</button>
                            </form>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </form>

Looking at the html code you only initialized a form tag once,

However the first iteration of

{% for task in data %}

includes a closing tag for the form, therefore terminating the scope of the form to only include the data from the first iteration (or the first row).

It's also redundant that you have another </form> at the end of the code.
One of the approach is to encapsulate every column into a form such as

 {% for task in data %}

<form action="/tasks" method = "POST">
                        <tr>
                            <td><input type="text"  name = "id" class = "form-control" id = "id" contenteditable = "false" value="{{ task.id }}" readonly></td>
                            <td><input class = "form-control" type="text" id="title" name="title_{{ task.id }}" value="{{ task.title }}"></td>
                            <td><input class = "form-control" type="text" id="description" name="description_{{ task.id }}" value="{{ task.description }}"></td>
                            <td><input class = "form-control" name ="status_{{ task.id }}" id = "status" value="{{ task.status }}" readonly></td>
                            <td><input class = "form-control" type="text" id="creation_time" name="creation_time_{{ task.id }}" value="{{ task.creation_time }}"></td>
                            <td><input class = "form-control" type="text" id="deadline" name="deadline_{{ task.id }}" value="{{ task.deadline }}"></td>
                            <td><input class = "form-control" type="text" id="task_type" name="task_type_{{ task.id }}" value="{{ task.task_type }}"></td>
                            <td>
                                <button type="submit">Update Row</button>
                            </form>
                            </td>
                        </tr>
                    {% endfor %}