Toggle

HTML

<div class="container">
 <button class="popup-btn" data-itemid="1"> Button 1</button> 
    <input type="text" id="alvo-1">
      <div id="popup-1" class="popup">
        <li data-alvo="1">item 1</li>
        <li data-alvo="1">item 2</li>
        <li data-alvo="1">item 3</li>
      </div>
</div>



<div class="container">
      <button class="popup-btn" data-itemid="2"> Button 2</button>
       <input type="text" id="alvo-2">
      <div id="popup-2" class="popup">
        <li data-alvo="2">item 1</li>
        <li data-alvo="2">item 2</li>
        <li data-alvo="2">item 3</li>
      </div>
</div>

CSS

.container{
  position: relative;
}
 .popup {
  position: absolute;
  display: none;
}

.popup.visible {
  display: block;
}

JavaScript

var button = document.querySelectorAll(".popup-btn")
var pop = document.querySelectorAll(".popup")
var li = document.querySelectorAll("li")
 


button.forEach(item => {
  item.addEventListener('click', () => {

    let popup = document.getElementById("popup-" + event.target.dataset.itemid);
        popup.classList.toggle("visible");

  })
})


li.forEach(item => {
 item.addEventListener('click', () => {

    let alvo = document.getElementById("alvo-" + event.target.dataset.alvo);
        alvo.value = event.target.innerHTML
    
    let popup = item.parentNode;
        popup.classList.toggle("visible");

  })        
})