实时搜索会将所选选项复制到其他文本框中

i have designed a search form. i want to select the destination using ajax, php and mysql. What happens is when i select the value from the first text box using the list fetched from database using ajax; that option gets selected for another text box as well.

Here's my code for ajax:

 $(document).ready(function(){  
      $('#location').keyup(function(){  
           var query = $(this).val();  
           if(query != '')  
           {  
                $.ajax({  
                     url:"search.php",  
                     method:"POST",  
                     data:{query:query},  
                     success:function(data)  
                     {  
                          $('#countryList').fadeIn();  
                          $('#countryList').html(data);  
                     }  
                });  
           }  
      });  
      $(document).on('click', 'li', function(){  
           $('#location').val($(this).text());  
           $('#countryList').fadeOut();  
      });

ajax for another destination input:

     $('#des').keyup(function(){  
           var query = $(this).val();  
           if(query != '')  
           {  
                $.ajax({  
                     url:"search2.php",  
                     method:"POST",  
                     data:{query:query},  
                     success:function(data)  
                     {  
                          $('#destinationList').fadeIn();  
                          $('#destinationList').html(data);  
                     }  
                });  
           }  
      });  
      $(document).on('click', 'li', function(){  
           $('#des').val($(this).text());  
           $('#destinationList').fadeOut();  
      }); 

//Form:
       <form>
            <br>
            <div class="row">

                <div class="form-group col-sm-5">
                  <label for="usr">From</label>

                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
                            <input id="location" type="text" class="form-control" name="loc" placeholder="Location">

                        </div>
                        <div id="countryList"></div> 

                    </div>

                <div class="col-sm-2">

                </div>
               <div class="form-group col-sm-5">
                  <label for="usr">To</label>
                   <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
                            <input id="des" type="text" class="form-control" name="des" placeholder="Destination">
                        </div>
                        <div id="destinationList"></div> 
                </div>

           </div>