Choosing Multiple Data From Dependent Dropdown

Hi,

I have a form. In this form, I have 3 fields. These are location, number and camera number. Each number and camera no has a location. In the form,I have done a dependent dropdown for number and camera no. When user selects a location, only the numbers and camera numbers which have relation to this location are seen on the menu. My problem is when user selects more than one location, only the lastly selected location's number and camera number's is listing on dropdown menu and pre-selected data are automatically deleted.

Here is my scripts:

$("#locations").change(function(){
    
    $.ajax({
        url: "{{ route('admin.numbers.get_by_location') }}?locations[]=" + $(this).val(),
        method: 'GET',
        success: function(data) {
            $('#numbers').html(data.html);
        }
    });
});


$("#locations").change(function(){
    
    $.ajax({
        url: "{{ route('admin.camera-nos.get_by_location') }}?locations[]=" + $(this).val(),
        method: 'GET',
        success: function(data) {
            $('#camera_nos').html(data.html);
        }
    });
});

My function in CameraNoController (Same function exists in NumberController):

public function get_by_location(Request $request)
{

abort_unless(\Gate::allows('egress_no_access'), 401);

    if (!$request->locations) {
        $html = '<option value="">'.trans('global.pleaseSelect').'</option>';
    } else {
        $html = '';
        $camera_nos = CameraNo::where('location_id', $request->locations)->get();
        foreach ($camera_nos as $camera_no) {
            $html .= '<option value="'.$camera_no->id.'">'.$camera_no->camera_no.'</option>';
        }
    }

    return response()->json(['html' => $html]);
}

And my route:

    Route::get('camera-nos/get_by_location', 'CameraNoController@get_by_location')->name('camera-nos.get_by_location');

How can I fix this? Thanks in advance.