Dependent Dropdown Error: GET http://localhost:8888/get.employee.states?country_id=5 404 (Not Found)

In Laravel-5.8, I'm trying to load state from a selected country.

The HrEmployeesController is in a folder called Hr

Controller

class HrEmployeesController extends Controller
{
  public function getStateList(Request $request)
  {
    $states = DB::table("config_states")
                ->where("country_id",$request->country_id)
                ->pluck("state_name","id")
                ->sortByDesc('state_name');
    return response()->json($states);
  }
}

view

    <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> Country:</label>
              <select id="country" class="form-control select2bs4" data-placeholder="Choose Country" tabindex="1" name="country_id" style="width: 100%;">
                <option value="" selected disabled>Select Country</option>
                   @if($countries->count() > 0 )
                     @foreach($countries as $country)
                       <option value="{{$country->id}}">{{$country->country_name}}</option>
                     @endforeach
                   @endif
              </select>
            </div>
            <!-- /.form-group -->
          </div>

            
          <!-- /.col -->
          <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> State:</label>
              <select id="state" class="form-control select2bs4" data-placeholder="Choose State" tabindex="1" name="state_id" style="width: 100%;">
              </select>
            </div>
            <!-- /.form-group -->
          </div>

<script type="text/javascript">
    $('#country').change(function(){
    var countryID = $(this).val();    
    if(countryID){
        $.ajax({
           type:"GET",
           url:"{{url('get.employee.states')}}?country_id="+countryID,
           success:function(res){               
            if(res){
                $("#state").empty();
                $("#state").append('<option>Select</option>');
                $.each(res,function(key,value){
                    $("#state").append('<option value="'+key+'">'+value+'</option>');
                });

            }else{
               $("#state").empty();
            }
           }
        });
    }else{
        $("#state").empty();
        $("#city").empty();
    }      
   });
    $('#state').on('change',function(){
    var stateID = $(this).val();    
    if(stateID){
        $.ajax({
           type:"GET",
           url:"{{url('get.employee.cities')}}?state_id="+stateID,
           success:function(res){               
            if(res){
                $("#city").empty();
                $.each(res,function(key,value){
                    $("#city").append('<option value="'+key+'">'+value+'</option>');
                });

            }else{
               $("#city").empty();
            }
           }
        });
    }else{
        $("#city").empty();
    }

   });
</script>

Route:

Route::group(['prefix' => 'hr', 'as' => 'hr.', 'namespace' => 'Hr', 'middleware' => ['auth']], function () {
    Route::delete('employees/destroy', 'HrEmployeesController@massDestroy')->name('employees.massDestroy');
    Route::resource('employees', 'HrEmployeesController');
});

Route::get('get/getStateList','Hr\HrEmployeesController@getStateList')->name('get.employee.states');
Route::get('get/getCityList','Hr\HrEmployeesController@getCityList')->name('get.employee.cities');

When I selected a country to load the states in the state dropdown, I got this error:

GET http://localhost:8888/get.employee.states?country_id=5 404 (Not Found)

How do I get this sorted out?

Thank you.