Moving elements to certain coordinates

I’ve been trying to make a simple grid system with pawns (chess-like) for my dungeons and dragons sessions using jquery sortable. I am using laravel with blade for a little project. It’s not gonna go to production or something so anything goes at this point.

So in the code below, (which was given to me by another question I did) it creates a grid of certain area on which the player can freely move the pawns. I made it so an ajax request can save each of the pawn’s coordinates to a database in the form of 0,1 3,4 etc.

Generally everything works but the problem is I can’t keep each pawn’s position to my grid, so when the page reloads, the pawns will get to their initial coordinates. Not only that but if I do not figure this out I cannot make it so the other players will see the pawns coordinates.

So here is the code I got so far:

let gridSize = 7,
//characters array is empty usually because it gets all the pawn infos from the db
     characters = [ {"id" : "1" , "name" : "Test", "hp" : "112"}
     ];

$('.grid')
  .css(`grid-template-columns`, `repeat(${gridSize}, 4rem)`)
  .html([...Array(gridSize**2)].map(() => '<div class="cell"></div>').join(''));

$('.characters')
  .html(characters.map((character) =>
    `<div class="character"><div class="stats" id ='${character.id}'><p>${character.name}</p><p>hp: ${character.hp}</p></div></div>`).join(``))
  .add('.grid .cell')
  .sortable({
    connectWith: '.characters, .grid .cell',
    cursor: 'grabbing',
    receive: (e, ui) => {
      if(ui.item.parent().hasClass('cell')) {
        let $cell = $(e.target),
            $character = ui.item,
            $characters = $cell.find('.character').not($character),
            coords = [$cell.index() % gridSize, Math.floor($cell.index() / gridSize)];
            coords = coords.toString();
            let characterId = $character.find('.stats').attr('id');
            updateCharacterPosition(characterId, coords)//writes the new pawn's position to the db
            
      }
    }
  });
   .grid{
  border: 2px solid gray;
  display: grid;
  width: fit-content;}
  
.grid .cell{
  align-items: center;
  aspect-ratio: 1 / 1;
  border: 1px solid lightgray;
  display: flex;
  justify-content: center;
  overflow: visible;}
  
.grid .cell:has(.character):hover{
  border-width: 2px;
  box-sizing: border-box;}
  
.characters{
  border: 2px solid gray;
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  min-height: 3rem;
  min-width: 6rem;
  padding: 1rem;
  width: fit-content;}
 
.character{
  align-items: end;
  background-color: #000000;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  height: 3rem;
  justify-content: center;
  text-align: center;
  width: 3rem;}
  
.character .stats{
  background-color: inherit;
  padding: 4px;}

.character p{
  font-size: .66rem;
  margin: 0;
  white-space: nowrap;}
<div class="grid"></div>
<div class="characters"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>