live search is replicating the selected option into other textbox - php

Question

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>