Ajax Live Search with Multiple Inputs

Question

I am writing an ajax live search feature into my software. There are multiple input that need to be ajax searchable on each form. Everything works great except I want the list of results to be displayed in a hovering "p" element right below the input I am currently searching in. Right now I have a "p" with class = "options" right below each input to display the results. When I type, the results are displayed in EVERY "p", that is, hovering under every input. Is there a way to reference just the child of the current input or do I need to use a separate function explicitly referencing the desired

for each input? I've tried a lot of child selector options on the internet and none of them have worked. The code is below. Thank you for your advice.

$(document).ready(function() {

//sets the chosen value into the input
$( ".options").on( "click", function(event) {
   var item =  $(event.target).text(); 
   $('#acctname').val(item);//place chosed result into the acctname input
   $('.options').hide();//hide result options after click
}); 

//On pressing a key in input field, this function will be called.
$(".textinput").keyup(function() {
   var id = $(this).attr("id");
   var val = $(this).val();
   if (val === '') { //Validating, if "name" is empty.
   $('div > p').html('').show();
   }else {//If input is not empty.

        $.ajax({
           type: "POST",
           url: "../model/ajax/livesearch.php",
           data: {id: id, val: val},
           success: function(html) {//place the result into the p element and set the proper css
              $('div > p').html(html).show().css({"position":"absolute","z-index":"+1","cursor":"pointer","color":"black","background-color":"white"});
              }
       });
   }
});
});

Update: this is how my HTML forms are structured.

<form action= "../model/dataentry.php?formname=enter_deposit" method="POST" id="ajaxform" name="ajaxform">
<div class = "label"><p1>Revenue Account Name</p1></div><div class = "field"><input class = "textinput" type="input" name="acctname" id="acctname" value = ""  autocomplete="off">
<p class = "options"></p></div>
<div class = "label"><p1>Revenue Account Number</p1></div><div class = "field"><input class = "textinput" type="input" name="acctno" id="acctno" value = ""  autocomplete="off">
<p class = "options"></p></div>
<input class = "submit" name = "Submit" type = "button" id = "ajaxsubmit" value = "Submit"  >
<input class = "submit" name = "Close" type = "button" id = "close" value = "Close"  >
</div>
</form>

Answer 1

Is this what you are looking for? https://jqueryui.com/autocomplete/

Answer 2

I found a solution to the issue in case anyone is curious. By assigning each div with class "option" an id equal to its parent's id plus "_opt" (ie "acctname" input would have a child div with id "acctname_opt"), I can edit div ids dynamically in my functions to place the result list where I want it. Here is my new javascript code. Works flawlessly. Thanks for your help, everyone.

$(document).ready(function() {

//sets the chosen value into the input
$( ".options").on( "click", function(event) {
   var item =  $(event.target).text(); 
   var clickedid = $(this).attr('id'); 
   var targetid = clickedid.split('_'); //remove the '_opt' suffice to get the target id
   $('#' + targetid).val(item);//place chosed result into the acctname input
   $('.options').hide();//hide result options after click
}); 

//On pressing a key in input field, this function will be called.
$(".textinput").keyup(function() {
   var id = $(this).attr("id");
   var optid = id + '_opt'; //set the target element id
   var val = $(this).val();
   if (val === '') { //Validating, if "name" is empty.
   $('#' + optid).html('').show();
   }else {//If input is not empty.
        $.ajax({
           type: "POST",
           url: "../model/ajax/livesearch.php",
           data: {id: id, val: val},
           success: function(html) {//place the result into the p element and set the proper css
              $('#' + optid).html(html).show().css({"position":"absolute","z-index":"+1","cursor":"pointer","color":"black","background-color":"white"});
              }
       });
   }
});
});