Help finding a better way to update a task

Hi everyone,

I was trying to build a to-do list app using HTML, CSS, and JavaScript.
Below is the partially done project’s link:

This was the approach used to edit a task:
Upon clicking the task’s title or description, the task is removed from the UI and taskItems array (localstorage will be implemented later on) and a modal populated with the task’s values pops up.
Then using the modal, a new task is added to the UI and taskItems array.
However, while doing so , the ‘edited’ task is placed at the top of the task list on the UI and added at the last position in the array, just like a new task.
Another flaw of using this approach is that if the user clicks on the task to edit it and later decides to leave it as it is, the task will still be deleted on the UI and array.
I wanted to ask if there was a better way to edit a task.

Thanks,