Dependent Dropdown Using Laravel / Ajax

I Need a Cascading Dropdown for my admin panel, where the dropdown values come from database. [[ example: https://prnt.sc/lccqc4 ]] I need to be work like this: https://prnt.sc/lccq7o

When I select Route no, the values of other dropdown will show related pickpoint names of that selected route. This is my ajax code I have written in php file (layout.admin.blade.php):

<script>
        $(function(){ 
        $('#selectRouteNo').change(function(){
            var route_no = $('#selectRouteNo').val();
            
            if(route_no){
            $('.removablepickpoint').remove();
            $('.routeClass').val("");
            jQuery.ajax({
                type: "POST",
                url: "url('AllTeacherController/ajax_getAllPickPointForRoute')",
                dataType: 'json',
                data: {
                route_no:route_no
                },
                success: function(res) {
                if (res) {
                    if (res.status === true){
                    var len = res.infos.length;
                    for(var i=0;i<len;i++){
                        $('#selectPickPoint')
                        .append('<option class="removablepickpoint" value="'+res.infos[i].id+'"> '+res.infos[i].stoppagePoint+' </option>');
                    }
                    
                    }
                    else {
                    alert("Pleast Try Again");
                    }
                }
                }
            });
            }
            else{
            alert("Please Select A Route First");
            }
        });
        });
    </script>

My controller is like that:

public function ajax_getAllPickPointForRoute(){
        $info=$this->ajax_get_pickUpPoint($this->input->post('routeNo'));
        if($info){
            $data = array(
                'status'=>true, 
                'infos'=>$info
            );
        }
        else{
            $data = array(
                'status'=>false,
            );
        }
        echo json_encode($data);
    }

    public function ajax_get_pickUpPoint($routeNo)
    {
        $routes=DB::table('all_routes')
        ->select('stoppagePoint')
        ->where('routeNo',$routeNo)
        ->get();
                
        if($routes->num_rows()){
            return $routes->result();
        }
        else{
            return FALSE;
        }
        
    }

My view page where I want to implement this:

<div class="col-md-4">
                                        <div class="fire_select2 fire_select">
                                            <label>Route No</label>
                                            <select name="routeNo" id="selectRouteNo" class="" required>
                                                <option value="">Select Route No.</option>
                                                @foreach($allRoutes as $route)
                                                    <option value="{{ $route->routeNo }}">{{ $route->routeNo }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="fire_select2 fire_select">
                                            <label>Pick Point</label>
                                            <select name="pickPoint" id="selectPickPoint" class="routeClass" required>
                                                <option value="">Select Pick Point</option>
                                                @foreach($allRoutes as $allRoute)
                                                    @foreach (explode(',', $allRoute->stoppagePoint) as $stoppagePoint)
                                                        <option value="{{ trim($stoppagePoint) }}">{{ trim($stoppagePoint) }}</option>
                                                    @endforeach
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>