Как разрешить пользователям изменять фоновое изображение div и сохранять его для всех зрителей?

Question

Я создал страницу, на которой пользователь может размещать значки (менять фон) ячеек в таблицах. Мне бы хотелось, чтобы это было совместным делом, чтобы изменения сохранялись на сервере, чтобы изменения увидели другие пользователи, которые зайдут на сайт или уже будут на сайте.

Концептуально я думаю, что у меня это получилось: мне нужно было бы где-то хранить изменения в фоновом (-ых) фоне (-ах), где при загрузке страницы вы можете запрашивать текущее состояние изменений, а затем каждый раз, когда кто-то рисует что-то (нажмите js) Мне нужно обновить состояние веб-страницы (на сервере).

Я искал firebase или Myjson. Однако даже после начала поиска я понятия не имею, с чего начать. Я был бы всегда благодарен, если бы кто-то мог дать мне небольшой толчок.

Сейчас сайт работает следующим образом:

<div class="toolbar">
    <div class="toolcontainer">
    <div id="i1"></div>
</div>
</div>

<div id="drawing">
    <div class="row">
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div> 
</div>
</div>

//variable with url stored inside
icon = '(icon.png)'


// onclick function classes 
$(".pixel").click(function() {
    //function that changes background to url
    $(this).css("background-image", "url(" + icon +")");
});


//id i1 till 23 + change var on click 
$('#i1').click(function (){
    icon = "icon1.png";
});

$('#i2').click(function (){
    icon = "icon2.png";
});

.toolbar{
    position: fixed;
    width: 100%;

    background-color: grey;
    border: black 1px solid;
}


.toolcontainer{
    width: 100%;
    height: 100%;
     display:flex;
}

#drawing{
    height: 14040px;
    width: 9933px;
    background-color: black;
    border-spacing: 1px;
    border: 1px solid black;
}

  .row {
      display: table-row;
    }

  .pixel {
    display: table-cell;
    background-color: white;
    width: 30px;
    height: 30px;
    }



#i1{
    position: relative;
    width: 3vw;
    height: 3vw;
    border: black 1px solid;
    display: inline-block;
    margin:0.7%;
    background-color: white;
    background-image: url("icon1.png");
}