Update table items order by drag and drop

I have a table on a menu page created by a plugin:

<table id="myTable" class="table table-bordered table-striped offer_tabb">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php
            foreach ($results as $result) {
        ?>
                <tr id="<?php echo $result->id; ?>" data-order="<?php echo $result->order; ?>">
                    <td>
                        <?php echo $result->id; ?>
                    </td>
                    <td>
                        <?php echo $result->name; ?>
                    </td>
                    <td>
                        <?php echo $result->email; ?>
                    </td>
                    <td>
                        <a class="btn btn-primary btn-sm">
                            <i class="fa fa-edit"></i>Edit
                        </a>
                        <a onclick="ConfirmationBox(this, 'Delete this', 'warning');" class="btn btn-danger btn-sm">
                            <i class="fa fa-trash-o"></i> Delete
                        </a>
                    </td>
                </tr>
            <?php } ?>
    </tbody>
</table>

I use ‘jquery-ui’ for that //cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

JS code:

jQuery("table tbody").sortable({
        update: function (event, ui) {
            UpdateOrder();
        }
    });

    function UpdateOrder() {
        var currAjax = null;
        var templates = new Array();

        jQuery("table tbody tr").each(function () {
            var template = new Object();
            template.id = jQuery(this).attr("id");
            template.order = jQuery(this).index();
            templates.push(template);
        });
        
        var orderdata = {
            action: 'UpdateTaskOrderAjax',
            data: templates
        };
        
        jQuery.ajax({
            type: 'POST',
            beforeSend: function (jqXHR) {
                if (currAjax != null){
                    currAjax.abort();
                }
                currAjax = jqXHR;
            },
            url: ajaxurl,
            data: orderdata,
            dataType: 'text',
            success: function (response) {
                var n = new notify({'style': 'success', 'title': 'Changed', 'message': 'Congrats!.  FAQ order changed.'});
                n.show();
                setTimeout(function () {
                    n.hide();
                }, 3000); 
            }
        });
    }

But that’s just front end, If I refresh the page it’s rest to the original order.

I have a column called “order” which I use to order the table results and I print both the id and order in each table row, I want to update that column when I change the ordering by drag and drop.