Drag and drop of rows not working in ASP.NET MVC view

Question

I want to be able to implement drag and drop on this page meaning I should be able to rearrange the rows as I want. This is not working for me. I am not able to drag the rows around. This is an ASP.NET MVC partial view.

What am I doing wrong?

@model Search.Models.CustomParentModel

<div class="row">
    <div class="col">
        <table id="table-1" class="table table-hover table-sm">
            <thead>
                <tr>
                    <th>Pso</th>
                    <th>Rank</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody style="cursor:pointer;">
                @foreach (var m in Model.CustomGroupPso)
                {
                    <tr>
                        <td>@m.Name</td>
                        <td>1</td>
                        <td>
                        @using (Ajax.BeginForm("RemoveCustomMapping", new AjaxOptions
                        {
                            HttpMethod = "POST",
                            UpdateTargetId = "mappings-modal-body",
                            OnBegin = "showLoading",
                            OnComplete = "hideLoading"
                        }))
                        {
                            @*<input type="hidden" name="mappingId" value="@m.PsoId" />*@
                            <input type="hidden" name="psoId" value="@m.PsoId" />
                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                <i class="fas fa-times"></i>
                            </button>
                        }
                        </td>
                    </tr>
                }
            </tbody>
        </table>

        <button id="saveButton" class="btn btn-primary mt-3">Save Changes</button> <!-- Save button to trigger save -->
    </div>
</div>

@section scripts {
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#table-1 tbody").sortable();
        })
    </script>
}