.circle {
            width: 13px;
            height: 13px;
            border-radius: 50%;
            font-size: 8px;
            font-weight: bold;
            color: #fff;
            line-height: 13px;
            text-align: center;
            cursor:pointer;
        }
        .spawn {
            border:1px dashed #666;
            background:#324148;
            padding:5px;
        }
        #plan {
            width:1200px;
            height:540px;
            margin:auto;
            background:white;
            border: 3px solid rgba(0,0,0,.125);
            -webkit-box-shadow: inset 0 0.25rem 0.125rem 0 rgba(0, 0, 0, 0.05) !important;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
        .move { float:left; }

<div id="toolbar" class="container-fluid">
        <div class="row">
            <div class="col-sm-4 p-1">
                <div class="buttons">
                    <button onclick="createStation('PE')" class="nbtn pe">PE</button>
                    <button onclick="createStation('PM')" class="nbtn pm">PM</button>
                    <button class="nbtn ins">INS</button>
                    <button class="nbtn det">DET</button>
                </div>
            </div>
            <div class="col-sm-4 spawn"></div>
            <div class="col-sm-4 text-right"></div>
        </div>
    </div>

<?php
        $stations = $con->query('SELECT * FROM zapp_clt_station WHERE zone = ?', $zId)->fetchAll();

        foreach ($stations as $station) {
            $id = $station['type']."".$station['num'];
            echo "<div id='".$id."' class='move circle pe context-menu-one'>".$station['num']."</div>";
        }

        echo "<script>";
        foreach ($stations as $station) {
            $id = $station['type']."".$station['num'];
            echo"
                $('#".$id."').offset({
                    left: ".$station['xCord'].",
                    top: ".$station['yCord']."
                });
            ";
        }
        echo "</script>";


        ?>

function createStation(type) {
            swal.mixin({
                input: 'text',
                confirmButtonText: 'Confirmar',
                cancelButtonText: 'Cancelar',
                showCancelButton: true,
                inputClass: 'form-control',
                confirmButtonClass: 'nbtn pm p-1',
                cancelButtonClass: 'nbtn pe p-1',
                progressSteps: ['1', '2']
            }).queue([{
                    title: 'Escolha o número do posto',
                    inputPlaceholder: '# do posto'
                },
                {
                    title: 'Posto de Interior ou Exterior',
                    input: 'select',
                    inputOptions: {
                        'Int': 'Interior',
                        'Ext': 'Exterior'
                    },
                    inputPlaceholder: 'Escolha',
                    inputClass: 'form-control',
                }
            ]).then(function(result) {
                if (result.value) {
                    $.ajax({
                        type: 'POST',
                        url: 'add-station.php',
                        data: {
                            id: result.value,
                            zone: zone,
                            company: company,
                            branch: branch,
                            type: type
                        },
                        dataType: 'json',
                        success: function(response) {
                            if (response.codigo == 1) {

                                var type = response.type.toLowerCase();
                                $(".spawn").append("<div id='" + response.id + "' class='move circle "+ type +" context-menu-one'>" + response.num + "</div>");

                                // On every new item..
                                dragger();
                            }
                            if (response.codigo == 0) {
                                Swal.fire({
                                    type: 'error',
                                    title: 'Oops...',
                                    text: response.mensagem
                                })
                            }
                        },
                        error: function() {
                            Swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Erro a processar o pedido!'
                            })
                        }
                    });
                }
            });

        }

function dragger() {
            $('.move').draggable({
                containment: '#plan',
                stop: function(e, ui) {
                    element = $(this);
                    var y = element.position().top;
                    var x = element.position().left;
                    var x = Math.round(x - 86);
                    var y = Math.round(y - 89);
                    num = ($("#"+ element.attr("id")).html());
                    // ##### [AJAX TO UPDATE THE STATIONS COORDS] #####
                    alert (x+'-'+y); //just for debug
                    $.ajax({
                        type: 'POST',
                        url: 'update-station.php',
                        data: {
                            zone: zone,
                            num: num,
                            x: x,
                            y: y
                        },
                        dataType: 'json',
                        success: function(response) {
                            if (response.codigo == 1) {
                                // DEBUG
                            }
                            if (response.codigo == 0) {
                                Swal.fire({
                                    type: 'error',
                                    title: 'Oops...',
                                    text: response.mensagem
                                })
                            }
                        },
                        error: function() {
                            Swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Erro a processar o pedido!'
                            })
                        }
                    });
                    // ##### [AJAX TO UPDATE THE STATIONS COORDS] #####
                }
            });
        }