<div class='container'>
  <div class='item'>
    item 1
    <button class='more' data-id='1'>more</button>
  </div>
   <div class='item'>
    item 2
    <button class='more' data-id='2'>more</button>
  </div>
   <div class='item'>
    item 3
    <button class='more' data-id='3'>more</button>
  </div>
   <div class='item'>
    item 4
    <button class='more' data-id='4'>more</button>
  </div>
</div>
<div class='menu' style="display: none">
  <ul>
    <li data-type='add'>Add to card</li>
    <li data-type='buy'>Buy in 1 click</a>
  </ul>
</div>

.container {
  display: flex;
}
.item {
  height: 60px;
  border: solid gray 1px;
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
  text-align: center;
}
.item button {
  margin-top: 5px;
}
.menu {
  position: absolute;
  background-color: white;
  border: solid gray 1px;
  border-radius: 5px;
}
.menu ul {
  list-style: none;
  padding-inline-start: 0;
}
.menu > ul > li {
  padding: 2px 10px;
}

function menuClick(e) {
  console.log(e)
  menu.style.display = "none";
  alert(e.srcElement.dataset.type + " " + e.srcElement.dataset.id);
}
function buttonClick(e) {
  
  e.preventDefault();
  menu.style.display = "block";

  var el = e.srcElement;
  var rect = el.getBoundingClientRect();

  menu.style.display = "block";
  menu.style.top = (rect.top + el.clientHeight) + "px";
  menu.style.left = rect.left + "px";
  var id = e.srcElement.dataset.id;

  menuItems[0].dataset.id = id;
  menuItems[1].dataset.id = id;
}

var buttons = document.getElementsByClassName("more");
var menu = document.getElementsByClassName("menu")[0];
var menuItems = menu.getElementsByTagName("li");

menuItems[0].addEventListener("click", menuClick, false);
menuItems[1].addEventListener("click", menuClick, false);

for (var i = 0; i < buttons.length; i++) {
  
  buttons[i].addEventListener("click", buttonClick, false);
}