Is it possible to just refresh the UI of a list for a newly created item?

We have given the users the ability to add multiple notes to a page

These notes are showed in a list

A single user may want to:

- edit multiple items in that row at the same time

- add a new note while editing existing notes

- a note has two modes, readonly and edit

- we use a toggle enter edit mode or approve/cancel changes for a note if it's in edit mode to go back to readonly mode

The first issue I had was rotating between different modes when two notes were in edit.

Instead of ajax refreshing the entire list, I only apply the refresh to a single row.

The second issue I've been unable to get around

I can only get the new item to show if I refresh the entire list, which means I lose any in progress edits

Is there a way to only refresh a list so that I show the new appended row without refreshing the other rows? 

I tried specifying the row number of the ajax refresh however it doesn't have that new row yet and throws an error