Change selectbox options based on previous option selection

Assume I have tow tables services, and items. the each item has many services

and I have a dynamic form that can be adding new field for services,

I want to aplly the services select options based on the selected item id

how can I do that? is there any butter way to hundel services?

here is some code:

    <h1 class="mt-8 mx-3">{{__('Add Items')}}</h1>
<div class="mt-5 flex mx-3">
    <div class="w-1/2">
<x-select  name="items[]" class="input w-1/2">
    <option >-- choose service --</option>
    @foreach ($items as $item)


        <option value="{{$item->id}}">
            {{ $item->name }}
        </option>
    @endforeach
</x-select>
    </div>
    <button type="button" class="btn mx-2 mt-1"
            @click="addNewField(service)">{{__('Add')}}</button>
    
    </div>
    <div class="overflow-x-auto mt-8 col">
        <table class="table border-collapse w-full text-center" >
            <thead class="thead-light">
            {{--<th>#</th>--}}
            <th>{{__('Service Name')}}</th>
    

        

        </thead>
  

            

        <template  x-for="(service, index) in services" :key="index">
            {{--<template x-for="item in items" :key="item.id"">--}}
            <tr >
                <div >
                    {{--<td x-text="index + 1"></td>--}}
                    <td>
                            <input class="input rounded-sm" type="hidden" x-model="service.id"/>
                          
                            <x-select x-model="service.service" name="services[]" class="input rounded-sm">
                                <option value="">-- choose service --</option>
                                @foreach ($services as $service)


                                    <option  value="{{$service->price}}">
                                        {{ $service->name }} (${{ number_format($service->price, 2) }})
                                    </option>
                                @endforeach
                            </x-select>
                        </td>

                            <button type="button" class="bg-red-600 px-4 py-2 rounded-full text-xl text-white "
                            @click="removeField(service)">&times;
                            </button>
              
                        </td>
                    </div>
                </tr>
            </template>

            </tbody>
        
        </table>
    </div>
</div>

 



<script>


    document.addEventListener('alpine:init', () => {
        Alpine.data('handler', () => ({
            id: '{{count($order->services)}}',
            service:'',
            

            services: [],

            addNewField(service) {
              
                    this.services.push({
                        id: '',
                        service: '',
                        
                    });
               
            },
            removeField(service) {
                let position = this.services.indexOf(service);
                console.log(service,position)
                this.services.splice(position, 1);
              
                return true;
               
            },
            
        }))

    })

can any one help?