How to populate select box independently using ajax

I'm here again, I work on a project that I need to make ajax call in other to populate city select box best on state select box. My code work is working but if I add another select box with the same details, it will only listen to the first state select then populate the first and second city select box.

Pls this what I mean...

Sender Select box

`<section>
    <div class="col col-md-6">
      <div class="form-group">
       <label  class="required">Sender State</label>
          <select class="state form-control" required>
              <option selected disabled>Select State</option>
           </select>
       </div>
     </div>

 <div class="col col-md-6">
   <div class="form-group">
    <label  class="required">Sender City</label>
     <select class="city form-control" required>
      <option selected disabled>Select City</option>
      </select>
    </div>
 </div>

`

Now I also have Receiver Select box

`<section>
    <div class="col col-md-6">
      <div class="form-group">
       <label  class="required">Receiver State</label>
          <select class="state form-control" required>
              <option selected disabled>Select State</option>
           </select>
       </div>
     </div>

 <div class="col col-md-6">
   <div class="form-group">
    <label  class="required">Receiver City</label>
     <select class="city form-control" required>
      <option selected disabled>Select City</option>
      </select>
    </div>
 </div>

`

So my ajax which I load before the end of

This first ajax, populate the state select box...

` $.ajax({
    type: "get",
    url: "/state",
    success: function (res) {
        if (res) {
            $.each(res,function(key,value){
                $(".state").append('<option value="'+value+'">'+value+'</option>');
            });
        }
    }
});`

This is where the issue start with the second ajax

$('.state').change(function(){ var cid = $(this).val(); if(cid){ $.ajax({ type:"get", url:"/city/"+cid, success:function(res) { if(res) { $('.city').empty(); $('.city').append('<option>Select State</option>'); $.each(res,function(key,value){ $('.city ').append('<option value="'+value+'">'+value+'</option>'); }); } }

           ` });`
        `}`
    `});`

Now, when I select 'sender select box' sender city will populate along side with receiver city... Pls how can I make Receiver city to be populated only when receiver state has been selected?