Im trying to make a floor planner like page for tables of a Restaurant. Every square of the page represent a table and they are draggable.

  <div  id="drag-1" class="draggable">
    <p> Table 1 </p>
  </div>
  <div id="drag-2" class="draggable">
    <p> Table 2 </p>
  </div>
  <div id="drag-3" class="draggable">
    <p> Table 3 </p>
  </div>

After dragging they have new coordinates changed appling a transform: translate() made by the js function.

The question is how I can save the coordinates in a MySQL DB with PHP and restore the position of every square after refreshing page?

Here is complete code to see it working

https://jsfiddle.net/1sfx4ubn/