如何让用户更改div的背景图像并保存给所有观众？

Question

I have created a page where the user can place icons (change background) of the cells in the tables. I would like this to be a collaborative thing, so that the changes are saved to a server so that another user that will enter the website, or is already on the website will see the changes.

Conceptually I think I've got it down: I would need to store the changes in background(s) somewhere (a server) where when the page loads you can ask for the current state of the changes then every time someone draws something (js click) I need to update the state of the webpage (on the server).

I have searched for firebase or Myjson. However even after starting my search I have no clue where to start. I would be forever grateful if someone could give me a little push.

Right now the website works as follows:

<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");
}