JAVASCRIPT WEB UI: Handle new temporary elements before server returns

I'm looking to create a snappy web-UI where a user can add a row below the currently active row in a grid of elements just by pressing enter. The user could in theory press enter several times to create multiple new rows below. Every row contains an input field. Each row represents a record in my database.

Now I need to handle the fact that one or more elements is added instantly to the ui, but the id of every corresponding record is set server side later. Once we have the id, the user may already have entered something in the ui-row.

I'm thinking that one solution would be to add a virtual "ui-id" -field to be created on the fly at UI runtime. The UI-ID would not be persisted in the database but only used for ui-reference. Every row in the ui, new and old, would get a "ui-id". As soon as the server returns the id, it would be attached to the new record.

What would be a better flow of handling temporary new rows that yet haven't recieved an id from the server?

Waiting for the server before adding the row in the UI would not be an alternative.