multiple different dropdown data get in one function

I want to get data from two different dropdowns using JavaScript and i run a function to get that two value but did not get it. i want to get data for showing value on another field. In the below I share my code with you, please check.

<form action="" method="post">
  @csrf
  <div class="form-group">
    <div>
      <label class="form-control-label">Select City1</label>
    </div>
    <select id="city1" name="city1" class="form-control">
      <option value="" selected>Choose...</option>
      @foreach ($cities as $city)
        <option value=""></option>
      @endforeach
    </select> 
  </div>
  <div class="form-group">
    <div>
      <label class="form-control-label">Select City2</label>
    </div>
    <select id="city2" name="city2" class="form-control">
      <option value="" selected>Choose...</option>
      @foreach ($cities as $city)
        <option value=""></option>
      @endforeach
    </select>
  </div>
  <div class="form-group">
    <div>
      <label class="form-control-label">Select Mode</label>
    </div>
    <select id="mode_id" name="mode_id" class="form-control">
    </select>
  </div>

<script>
$(document).ready(function() {
    get_info();
});

function get_info() {
    var city2 = $('#city2').val();
    var city1 = $('#city1').val();
    $.post(
        '',
        {
            _token: '',
            city2: city2,
            city1: city1
        },
        function(data) {
            $('#receiver_area_id').html(null);
        
            for (var i = 0; i < data.length; i++) {
                $('#mode_id').append($('<option>', {
                    value: data[i].id,
                    text: data[i].name
                }));
            }
        }
    );
}

$('#city2').on('change', function() { 
    get_info();
});

$('#city1').on('change', function() {
     get_info();
});
</script>

via Chebli Mohamed