filament sorting using x-sortable

<div>
    <button x-on:click="console.log('test')">test</button>
    <div
    x-data="{}"
    x-sortable
    x-on:end="console.log('Sorting ended!', $event)"
    class="flex flex-col gap-2"
>
    <div
        class="py-2 bg-white px-4"
    >
        test1
    </div>
    @foreach ($users as $user)
        <div
            x-sortable-handle
            x-sortable-item="{{ $user->id }}"
            x-id="{{ $user->id }}"
            class="py-2 bg-white px-4"
        >
            <span class="text-success-500">{{ $user->email }}</span>
        </div>
    @endforeach

    <div
    x-sortable-handle.prevent
    x-sortable-item=""
    class="py-2 bg-white px-4"
>
    test
    </div>
</div>
</div>

<div>
    <button x-on:click="console.log('test')">test</button>
    <div
    x-data="{}"
    x-sortable
    x-on:end="console.log('Sorting ended!', $event)"
    class="flex flex-col gap-2"
>
    <div
        class="py-2 bg-white px-4"
    >
        test1
    </div>
    @foreach ($users as $user)
        <div
            x-sortable-handle
            x-sortable-item="{{ $user->id }}"
            x-id="{{ $user->id }}"
            class="py-2 bg-white px-4"
        >
            <span class="text-success-500">{{ $user->email }}</span>
        </div>
    @endforeach

    <div
    x-sortable-handle.prevent
    x-sortable-item=""
    class="py-2 bg-white px-4"
>
    test
    </div>
</div>
</div>