How to order and serialize XMLHttpRequests triggered by different events in the same web page to avoid optimistic lock

Question

I have a webpage allowing users to create/modify course content (like moodle). When they click the pencil icon, an input box will appear allowing them to update the section name. The new name will be updated to the server on the focusout event of the input box. Users can also click the up/down arrow to adjust sequences of sections.

All changes are sent to the server using XMLHttpRequest. To avoid concurrent updates from different users, I use an optimistic lock policy by attaching a version field to each request and checking the version against database records and updating the version after each operation.

This strategy works well when users make one operation after another. However, sometimes they will trigger two operations at the same time. For example, when the focus is still in the input box, a user clicks the up/down arrow. By doing this, two requests will be sent to the server with the same version, and one will trigger an optimistic lock error.

I am thinking of using a worker to queue and execute the requests from the same page in order, so they will not trigger optimistic locks. But I am not sure if this is a good solution. Any suggestion is greatly appreciated!