Dos respuestas para ti.

Usando el manejo de eventos moderno

Le sugiero que no use controladores de eventos de estilo onxyz . Hay varios problemas con ellos, pero probablemente los dos más significativos son:

1. Solo pueden llamar a funciones globales.
2. El contexto generado para ellos es muy complejo, por lo que es muy fácil encontrarse con conflictos (por ejemplo, si su función tuviera el nombre removeChild o appendChild o en algunos casos submit , no terminaría llamando a su función, llamaría un método en un elemento DOM en su lugar).

En su lugar, mira el uso de addEventListener . Aquí hay un ejemplo en el que los controladores de eventos se adjuntan directamente a sus elementos div :

 <div class="search-input"> <input oninput="getPorts(value)" type="text" id="pick" name="pick" placeholder="Enter Pickup Location" required /> <div class="autocom-box"> <!-- dynamic portsData map box --> </div> </div> <div class="search-input"> <input oninput="getPorts(value)" type="text" id="dest" name="dest" placeholder="Enter Destination" required /> <div class="autocom-box"> <!-- dynamic portsData map box --> </div> </div>

 const getSearch = (event) => { const searchWrapper = event.currentTarget; const inputBox = searchWrapper.querySelector("input"); const suggBox = searchWrapper.querySelector(".autocom-box"); // ... }; for (const element of document.querySelectorAll(".search-input")) { element.addEventListener("click", getSearch); }

Solo hice los elementos div allí, pero también querrás hacer los elementos de input .

También puede considerar el manejo de eventos delegados .

Continuando con el atributo onclick

Si realmente desea seguir usando el atributo onclick , pásele this :

 <div class="search-input" onclick="getSearch(this)"> <!-- −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^ -->

this en el contexto generado para los controladores de eventos de estilo de onxyz es el elemento en el que se encuentra el atributo onclick (el div .search-input en este caso).

Luego, en getSearch , busque dentro de ese div :

 const getSearch = (searchWrapper) => { const inputBox = searchWrapper.querySelector("input"); const suggBox = searchWrapper.querySelector(".autocom-box"); // ... };

En primer lugar, deje de usar detectores de eventos en línea. Utilice addEventListener en su lugar. Para hacerlo, tome una lista de todos los contenedores de entrada de búsqueda e itere sobre la lista, agregando un detector de clics a todos y cada uno.

Cuando lo haya hecho, la función del controlador pasa automáticamente al objeto de evento, que contiene la propiedad currentTarget que contiene una referencia al elemento al que está vinculado el detector de eventos. Esto le permite encontrar descendientes de ese elemento usando querySelector en lugar de document .

Para acceder al objeto de evento, debe definir un nombre de parámetro en su función de controlador. He usado event en el siguiente ejemplo, pero puedes nombrarlo como quieras.

 let searchWrapper; let inputBox; let suggBox; const getSearch = (event) => { searchWrapper = event.currentTarget; console.log(searchWrapper); inputBox = searchWrapper.querySelector("input"); console.log(inputBox); suggBox = searchWrapper.querySelector(".autocom-box"); console.log(suggBox); }; for (const searchInput of document.querySelectorAll('.search-input')) { searchInput.addEventListener('click', getSearch); }

 <div class="search-input"> <input type="text" id="pick" name="pick" placeholder="Enter Pickup Location" required /> <div class="autocom-box"> 1. abc </div> </div> <div class="search-input"> <input type="text" id="dest" name="dest" placeholder="Enter Destination" required /> <div class="autocom-box"> 2. def </div> </div>