How to modify an entry in the database using Flask?

Question

Maybe I am putting myself here to fail, but I am new to Flask, and I would like to make the same row that displays the saved text, to be also editable and savable.

So I am trying to implement the edit-note part.

I'm adding the delete function in my output, as reference on how it is working. The delete function works

This is the Flask app structure.

• html with some jinja/python (the frontend)
• index.js
• views.py (for the routes)

Right now, it looks like this my home.html And note that below I use the function function editable

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <form method="POST">
                    <input type="text" class="form-control" id="note" name="note" placeholder="Add your note here">
                    <div class="d-flex justify-content-center">
                        <button type="submit" class="btn btn-primary">Add Note</button>
                    </div>
                </form>
                <ul class="list-group id="notes">
                {% for note in user.notes %}
                    <li class="list-group-item list-group-item-action" onClick="editable({{ note.id }})" data-note-id="{{ note.id }}">{{ note.text }}
                  
                        <div class="btn-group">
                            <button class="btn btn-danger btn-sm delete-btn" onClick="deleteNote({{ note.id }})">Del</button>
                                <button class="btn btn-primary btn-sm edit-btn" onClick="editNote('{{ note.id}}', '{{ note.text }}')">Edit</button>
                        </div>
                    </li>
                {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>


<script>
    function editable(noteId) {
        // Get the li element corresponding to the noteId
        const listItem = document.querySelector(`li[data-note-id="${noteId}"]`);
        // Toggle the contentEditable attribute
        listItem.contentEditable = true;
    }
</script>

• index.js

function deleteNote(noteId) {
    fetch('/delete-note', {
      method: 'POST',
      body: JSON.stringify({ noteId: noteId }),
    }).then((_res) => {
        window.location.href = "/";
    });
}

function editNote(noteId, newText) {
    fetch('/edit-note', {
      method: 'POST',
      body: JSON.stringify({ noteId: noteId, newText: newText }),
    }).then((_res) => {
        window.location.href = "/";
    });
}

• views.py

@views.route('/delete-note', methods=['POST'])
def delete_note():
    note = json.loads(request.data) # this function expects a JSON from the INDEX.js file 
    noteId = note['noteId']
    note = Note.query.get(noteId)
    if note:
        if note.user_id == current_user.id:
            db.session.delete(note)
            db.session.commit()
    return jsonify({})

@views.route('/edit-note', methods=['POST'])
def edit_note():
    note = request.form('note')
    note_id = note['noteId']
    new_text = note('newText')

    note = Note.query.get(note_id)
    note.text = new_text
    db.session.commit()
    return render_template("home.html", user=current_user)