how to fill result of multiple ajax call into same div id?

Question

I have two autocomplete textbox. I would to like to fill the ajax results in same div so that style will be the same for both div. how to achieve this on keyup. Is it possible to add like t his

$("#main_search").keyup(function(){
 var el = $(this);
//alert("hi");
  if (e.which !== 38 && e.which !== 40 && e.which !== 13) {
            delay(function() {
    $.ajax({
    type: "POST",
    url: "<?php echo base_url('search_jobs/get_category'); ?>",
    data:'term='+$(this).val(),
    //beforeSend: function(){
 //         $('#loader-icon').show();
 //     },
    success: function(data){
        //alert(data);
        $("#suggesstion-box").show();
        $("#suggesstion-box ul li").css("border","1px solid red");
        $("#suggesstion-box").html(data);
        $("#search-box").css("background","#FFF");
    }
     });
            }, 400);


    });
}); 


$("#location_search").keyup(function(){
 var el = $(this);
 if (e.which !== 38 && e.which !== 40 && e.which !== 13) {
            delay(function() {
    $.ajax({
    type: "POST",
    url: "<?php echo base_url('search_jobs/get_location'); ?>",
    data:'term='+$(this).val(),

    success: function(data){
        $("#suggesstion-box").show();
        $("#suggesstion-box").html(data);
        $("#location_search").css("background","#FFF");
    }
    });
}); 

Answer 1

Change this line:

$("#suggesstion-box").html(data);

to

$("#suggesstion-box").append(data);

This will keep appending in the box, you might need to clear the suggestion box at certain time depending on your flow.