how to populate Multiselect dropdown based on multiselect dropdown in laravel?

I have two multiselect dropdownlist. I want to populate the 2ndmulti select dropdown based on the 1st multiselect dropdown.

web.php

Route::get('allstate/{id}', 'LocationController@allstate');

Country dropdown (1st)

<select  multiple="multiple" name="country[]" id="country" class="select">                 
    @foreach($country_data as $country)
         <option value="" >
              </option>
    @endforeach
</select>

State dropdown (2nd)

<select  multiple="multiple" name="city[]" id="city" class="select">                   

 </select>

Controller

public function index()
{
 $country_data=DB::table('country')->select('country_id','country_name')->orderby('country_name')->get();
 return view('location',compact('country_data') );
}
public function allcaste($id)
{
$caste_data= DB::table('caste')->whereIn('religion_id',$id)->select('caste_id','caste_name')->get();
return json_encode($caste_data);
}

Script

<script type="text/javascript">
$(document).ready(function() {
    $('select[name="country[]"]').on('change', function() {
        var countryID = $(this).val();

        if(countryID) {
            $.ajax({
                url: 'allstate/'+countryID,
                type: "GET",
                dataType: "json",
                success:function(data) {
                    $('select[name="city"]').empty();
                    $.each(data, function(key, value) {
                        $('select[name="city"]').append('<option value="'+ value.city_id +'">'+ value.city_name +'</option>');
                    });

                }
            });
        }else{
            $('select[name="city"]').empty();
        }
    });
});

via Chebli Mohamed