Блокировка полей ввода в разных клиентах (браузерах)

Question

Предположим, у меня есть HTML-форма. Что я пытаюсь заархивировать - это совместное редактирование формы, но мне нужно сделать, когда кто-то нажимает или находится в фокусе для поля ввода от одного клиента (браузера), нужно заблокировать это поле другим клиентам (открыли другие браузеры). это может быть архив

Мой первоначальный подход был таким: использование сокет-сервера и базового jquery для простоты понимания, это правильный путь?

    const uuid = generate a UID for a browser instance
    client.event.subscribe('socket/id', data => {

      if(uuid != data['uuid']) {
        // $("#firstname").attr("readonly", true)
        $("#firstname").val(data['field']);

      }

    })


  function keyPressVal(){
    var edValue = document.getElementById("firstname");
    client.event.emit('socket/Id',{
          field: edValue.value

        })
   }

Я пытался с помощью disable а также readonly атрибуты вышеописанным способом не получили ожидаемых результатов

когда читал об этом, я придумал эту концепцию под названием

Операционная трансформация

это то, что я должен пройти, может кто-нибудь показать мне правильный путь для этого,