I need a table from a database to refresh in real time

Question

I use PHP to call a database table and then display it on the page, I then allow users to drag on drop the columns to where the want them, each move triggers a function to update the table in real time to what the user selects, but doesn't update a row which says its order. This is fixed when the page is reloaded as seen in the gif

Link to Gif

Ive tried selecting the table then calling table.reload(), Ive also tried making a separate static table right next to it whose numbers never change and are not moved when a user drags and drops columns, getting the numbers to update in real time or the latter option are both great.

Table Code

<div class='container'>
    <h3 class='text-center'>La Liga Picks</h3>
    <table class='table table-bordered' id='myTable'>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Definition</th>
        </tr>
        <tbody class='row_position'>"?>
        <?php

        require('db_config.php');
        $tablename = $_SESSION['username'] . "_laliga";
        $_SESSION['tablename'] = $tablename;
        $sql = "SELECT * FROM $tablename ORDER BY position_order";
        $users = $mysqli->query($sql);
        while($user = $users->fetch_assoc()){

        ?>
            <tr  id="<?php echo $user['id'] ?>">
                <td><?php echo $user['position_order'] ?></td>
                <td><?php echo $user['title'] ?></td>
                <td><?php echo $user['description'] ?></td>
            </tr>
        <?php } ?>
        </tbody>
    </table> <?php } ?>

Functions that allow edits and talking with the database

<script type="text/javascript">
 $( ".row_position" ).sortable({
    delay: 150,
    stop: function() {
        var selectedData = new Array();
        $('.row_position>tr').each(function() {
            selectedData.push($(this).attr("id"));
        });
        updateOrder(selectedData);


    }
});

function updateOrder(data) {
    $.ajax({
        url:"ajaxPro.php",
        type:'post',
        data:{position:data},
        success:function(){
            var table = document.getElementById("myTable");
            table.reload(forcedReload);


        }
    })
}

As seen in the gif I would like the numbers in the leftmost row to also be updated as the columns are moved, they are updated if the user reloads the page but that is not ideal

Answer 1

add a class to the first cell and then call that cell in the row and change it's text value.

<div class='container'>
        <h3 class='text-center'>La Liga Picks</h3>
        <table class='table table-bordered' id='myTable'>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Definition</th>
            </tr>
            <tbody class='row_position'>"?>
            <?php

            require('db_config.php');
            $tablename = $_SESSION['username'] . "_laliga";
            $_SESSION['tablename'] = $tablename;
            $sql = "SELECT * FROM $tablename ORDER BY position_order";
            $users = $mysqli->query($sql);
            while($user = $users->fetch_assoc()){

            ?>
                <tr  id="<?php echo $user['id'] ?>">
                    <td class="positionOrder"><?php echo $user['position_order'] ?></td>
                    <td><?php echo $user['title'] ?></td>
                    <td><?php echo $user['description'] ?></td>
                </tr>
            <?php } ?>
            </tbody>
        </table> <?php } ?>


    $('.row_position>tr').each(function(i,v) {
                $(this).find('.positionOrder').text(i+1);
                selectedData.push($(this).attr("id"));
            });