Final project (very similar to Finance) : How can I delete selected row of table?

Question

In mynote.html, there is a table of words. It is very similar to history.html or index.html of Finance (pset8). I want to upgrade it for my final project, so I tried to make 'delete'.
But, there is a problem.
So,, there is delete button on every row of the table.
But it doesn't matter which delete button I click. It's the first row that always gets deleted. I understand why but don't know how to fix.

So my questions are ...
1. Can I fix it by renaming the input names? If so, how can I give a different name to each row?
2. Should I use AJAX, JQuery or other languages?

Here are my codes
mynote.html:

{% block title %}
    My Note
{% endblock %}

{% block main %}
<form action="/mynote" method="post">
    <table class="table table-hover">
        <thead class="thead-dark">
            <tr>
                <th>#</th>
                <th>Word</th>
                <th>Meaning</th>
                <th> </th>
            </tr>
        </thead>
        <tbody>
            {% for word in words %}
            <tr>
                <td>{{loop.index}}</td>
                <td>{{word["word"]}}</td>
                <td>{{word["meaning"]}}</td>
                <td>
                    <input type="hidden" name="delete" value="{{word["id"]}}">
                    <button class="btn btn-outline-dark btn-sm" type="submit">Delete</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</form>
{% endblock %}

and def mynote() in application.py:

@login_required
def mynote():
    """Show the user's wordnote"""

    # User reached route via POST (as by submitting a form via POST)
    if request.method == "POST":

        # Delete selected table row (But it always delete the first row of table)
        if request.form.get("delete"):
            db.execute("DELETE FROM words WHERE id = :id", id=request.form.get("delete"))

            words = db.execute("SELECT * FROM words WHERE user_id = :user_id", user_id=session["user_id"])

            return render_template("mynote.html", words=words)

    else:
        words = db.execute("SELECT * FROM words WHERE user_id = :user_id",
                            user_id=session.get("user_id"))
        return render_template("mynote.html", words=words)

Thank you, in advance, for any help.

Answer 1

You can add "name" and "value" attributes to each button element (reference: MDN doc). You wouldn't need the hidden input elements.