In laravel-livewire alpineJS app clicking on selected subitems

[sergeynilov]

Helo,
In laravel 7 /livewire 1.3 / turbolinks:5.2 / alpine@v2 app I make selection input of states and on state selected I
show listing of related regions. When user clicks on one of regions, related region must be opened and I search how to implement it.
In component :

    <?php
    
    namespace App\Http\Livewire;
    
    use App\Hostel;
    use App\Region;
    use App\State;
    use Facade\Ignition\SolutionProviders\IncorrectValetDbCredentialsSolutionProvider;
    use Livewire\Component;
    
    class StatesWithRegions extends Component
    {
        public function render()
        {
            ...
            return view('livewire.states-with-regions', [
                'hostels_count' => $hostels_count,
                'statesList' => $statesList,
                'regionsListByStateIdArray' => $regionsListByStateIdArray,
            ]);
        } // public function render()
    
    
        public function hostelsByRegion($selected_state_code, $selected_regions_slug ) {
            \Log::info( '-1 hostelsByRegion selected_state_code::' . print_r(  $selected_state_code, true  ) );
            \Log::info( '-1 hostelsByRegion $selected_regions_slug::' . print_r(  $selected_regions_slug, true  ) );
    
            return view('livewire.hostels_by_region', [
    //            ...
            ]);
        }
    }

In resources/views/livewire/states-with-regions.blade.php :

    <div class="page_content_container card">
    <div class="page_content_header card-title">
        <h4>Available states/regions with hostels</h4>
    </div>
    
    <div class="page_content card-body"  x-data="{ selected_state_id: null, selected_state_code: null, regionsByStateId:  <?php print str_replace('"',"'",
        json_encode( $regionsListByStateIdArray) ) ?> } " >
    
    
        <hr>
        <hr>
        <select x-model="selected_state_id">
            @foreach($statesList as $nextState)
                <option :value="{{$nextState->id}}" x-text="'{{$nextState->id . '=>' . $nextState->label}}'"></option>
            @endforeach
        </select>
        Stores:
    
        <template x-for="nextRegionsByState in regionsByStateId[selected_state_id] || []" :key="nextRegionsByState.id">
            <div class="card-body m-0 p-0 ml-3">
                <ul>
            
                    <li class="m-0 p-0">
                        <a wire:click="hostelsByRegion( "+selected_state_code+","+ nextRegionsByState.slug + " class="p-1 a_a_link">
                               <div x-html="nextRegionsByState.id + '=>' + nextRegionsByState.text"></div>
                        </a>
    
                    </li>
        
                </ul>
            </div>
    
        </template>

For regions selection I use state.id, but for state I need to use state.code
In the code above I use selected_state_id for selected state id, but I also need

1. to fill selected_state_code with selected state code. How can I do it?

2. I need to move to hostels list clicking on hostelsByRegion( link in the code above. Now it dose not work.
   In the browser I see : https://prnt.sc/tvin91
   Looks like that is invalid way. How can I do it?

3. As I need to move to hostelsByRegion action is it better to make it as 1 more component with template or I can use several
   methods with tremplate in 1 StatesWithRegions component?

Thanks!