Cascading dropdown not working as expected in Edit modal form

I have two models in my Project

class AppraisalRespondent extends Model
{
    protected $table = 'appraisal_respondents';

    protected $fillable = [
                  'id',
                  'respondent_id',
                  'department_id',
              ];

    protected $casts = [];


    public function employeerespondent()
    {
        return $this->belongsTo('App\Models\Hr\HrEmployee','respondent_id');
    }

    public function department()
    {
        return $this->belongsTo('App\Models\Hr\HrDepartment','department_id','id');
    }      

}

class HrEmployee extends Model
{

   protected $table = 'hr_employees';

   protected $fillable = [
              'id',
              'first_name',
];
}

An employee belongs to one department, But many employees can belong to a department. Also an employee will have many respondent. A respondent is also an employee.

The controller is shown below:

Controller

public function index()
{
$userCompany = Auth::user()->company_id;
    $departments = HrDepartment::where('company_id', $userCompany)->get();
    $employeerespondents = HrEmployee::where('company_id', $userCompany)->get();   

    $respondents            = AppraisalRespondent::where('is_internal', 0)->where('is_status', 0)->get();

    return view('appraisal.appraisal_respondents.index')
            ->with('departments', $departments)
            ->with('employeerespondents', $employeerespondents)
            ->with('employees', $employees);
}

public function update(UpdateAppraisalRespondentRequest $request, $id)
{      

        $respondent = AppraisalRespondent::find($id);                            
        $respondent->respondent_id          = $request->respondent_id;
        $respondent->department_id          = $request->department_id;
        $respondent->save();

            return back();
   
} 

public function getEmployeeList(Request $request)
{
    $deptemployees = HrEmployee::where('department_id', $request->department_id)->where('hr_status', 0)
                        ->get()
                        ->pluck('full_name', 'id');
    return response()->json($deptemployees);
}  

Also, I have an index view blade with edit modal form

Index.blade

    <div class="table-responsive">
        <table id="example1-tab1-dt" class=" table table-bordered table-striped table-hover datatable datatable-internal" cellspacing="0" width="100%">
            <thead>
                <tr>

                    <th width="5%">
                        #
                    </th>
                    <th width="35%">
                        Respondent
                    </th>
                    <th width="25%">
                        Department
                    </th>                                   
                    
                    <th width="10%">
                        &nbsp;
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach($respondents as $key => $respondent)
                    <tr>
                        <td>
                            {{$key+1}}
                        </td>
                        <td>
                            {{$respondent->employeerespondent->first_name}}
                        </td>
                        <td>
                            {{isset($respondent->department) ? $respondent->department->dept_name : 'None'}}
                        </td>
                        <td>
                            <button type="button" class="btn btn-sm btn-info mr-1 edit-respondent" data-toggle="modal" data-target="#edit_respondent{{ $respondent->id }}">Edit</button>
                         
                        </td>                            
            <div class="modal fade" id="edit_respondent{{ $respondent->id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                        <div class="modal-content">
                         <form action="{{route('appraisal.appraisal_respondents.update',['id'=>$respondent->id])}}" method="post" id="edit_respondent-form">
                          {{ csrf_field() }}
		     <input name="_method" type="hidden" value="PUT">
                            <div class="modal-header">
                                Update Respondent
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                <label class="control-label"> Department:<span style="color:red;">*</span></label>
                                <select id="departmentedit" class="form-control select2bs4" data-placeholder="Choose Respondent" tabindex="1" name="department_id" style="width: 100%;">
                                     <option value="0" selected="true" disabled="true">Select Department</option>                                         
                                      @if($departments->count() > 0)
                                           @foreach($departments as $department)
                                              <option value="{{$department->id}}" @if($department->id == $respondent->department_id) selected @endif>{{$department->dept_name}}</option>
                                           @endforeach  
                                        @endif
                                 </select> 
                                                      
                           </div>
                            </div>
                          <div class="col-md-12">
                          <div class="form-group">
                            <label class="control-label"> Respondent:<span style="color:red;">*</span></label>
                              <select id="employeeedit" class="form-control select2bs4" data-placeholder="Choose Respondent" tabindex="1" name="respondent_id" style="width: 100%;">
                                  <option value="0" selected="true" disabled="true">Select Respondent</option>                                         
                                   @if($employeerespondents->count() > 0)
                                    @foreach($employeerespondents as $employeerespondent)
                                      <option value="{{$employeerespondent->id}}" @if($employeerespondent->id == $respondent->respondent_id) selected @endif>{{$employeerespondent->first_name}}</option>
                                      @endforeach  
                                       @endif     
                                                                                                                           
                                      </select>  
                                     </div>
                                    </div>                                                        

                                     <div class="modal-footer">
                                      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                               <button  type="submit" id="edit_respondent_btn-submit" class="btn btn-success btn-ok">Save</button>
                         </div>
                    </form>
                   </div>
                 </div>
                </div>                                               
              </tr>
             @endforeach
            </tbody>
        </table>
    </div>  

<script type="text/javascript">
    $('#departmentedit').change(function(){
    var departmentEditID = $(this).val();    
    if(departmentEditID){
        $.ajax({
           type:"GET",
          url:"{{route('get.employee.departments')}}?department_id="+departmentEditID,
           success:function(res){               
            if(res){
                $("#employeeedit").empty();
                $("#employeeedit").append('<option>Select Respondent</option>');
                $.each(res,function(key,value){
                    $("#employeeedit").append('<option value="'+key+'">'+value+'</option>');
                });              
            }
            else{
               $("#employeeedit").empty();
            }
           }
        });
    }else{
        $("#employeeedit").empty();
    }      
   });  
 $( document ).ready(function() {
    $('#departmentedit').trigger("change");
 });
</script>

The edit page is a modal form in the index blade. When user clicks on edit button, it loads the edit modal form. The edit modal form has two dependent dropdown. The department dropdown onchange populates the respondent dropdown.

The problem I have is that when the edit modal is rendered, only the department dropdown displays the value from the database. The respondent dropdown don't display value until when onchange.

https://i.stack.imgur.com/3qnip.png

Ideally, it should display related respondent first_name to the department in the dropdown without the dropdown onchange.

How do I resolve this to make the respondent dropdown also to display the respondent first_name as related to the department. Not until I click the dropdown?

Thanks