change the select input on change of other select input

Question

i have more than 2 divs that have 2 select inputs. when i change branch_country, the other branch_region changes according to branch_country value via ajax.

<div>
   <select class="branch_country></select>
   <select class="branch_region></select>
</div>
<div>
  </elect class="branch_country></select>
  <select class="branch_region></select>
</div>

and here is my ajax code

    $('.branch_governorate_select').on('change', function(e) {
        e.preventDefault();

        console.log($(this).eq($(this)));

        var countryID = $(this).val();

        var status = $(this).parent().parent().find('.modal-body').find('#select-status-calendar')
            .val();

        var url = "{{ route('sett.doc_get_branch_region', ':id') }}";
        url = url.replace(':id', countryID);

        if (countryID) {
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    region_input.empty();
                    $.each(data, function(key, value) {
                        region_input.append('<option value="' +
                            value.id + '">' + value.name + '</option>');
                    });
                }
            });
        } else {
            region_input.empty();
        }
    });

it works well, but it changes all inputs with class branch_region. but i need to change only the branch_region select input that is inside the same div