Plugin doesn't properly sort integer values

[ikechukwukalu]

In a nested layout with draggable groups with draggable items within each group, I use this function to sort a list of departments and their staffs.

private function fetch_department() : object {
        return department::orderBy('position', 'ASC')->get();
}

The column position is an integer. When the position column has a maximum value of 9, it sorts accordingly this way:

1, 2, 3, 4, 5, 6, 7, 8, 9

but when the value gets to 10, 11, 12... it's sorts this way:

1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

This occurrence is quite common in JavaScript but the issue is how to handle it when using this plugin.

For more details, here's my HTML:

<div class="row justify-content-center" wire:sortable="departmentOrder" wire:sortable-group="staffOrder" style="display: flex">
    <div class="col-md-12">
        @livewire('add-department')
    </div>
    @foreach ($departments as $department)
    <div class="col-md-6 p-2" wire:key="department-{{ $department->id }}" wire:sortable.item="{{ $department->id }}">
        <div class="border p-2">
            <div style="display: flex" wire:sortable.handle>
                <h4 align="center"><span class="badge badge-secondary p-2">{{ $department->name }}</span></h4>
            </div>

            <ul class="list-group" wire:sortable-group.item-group="{{ $department->id }}">
                @forelse ($department->staffs()->orderBy('position', 'ASC')->get() as $staff)
                <li class="list-group-item" wire:key="staff-{{ $staff->id }}"
                    wire:sortable-group.item="{{ $staff->id }}">
                    <b>{{ $staff->position }}.</b>
                    {{ $staff->name }}
                </li>
                @empty
                <li class="list-group-item">No staff found</li>
                @endforelse
            </ul>
            @livewire('add-staff', ['department_id' => $department->id])
        </div>
    </div>
    @endforeach
</div>