JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
  <button>Click</button>
  <div class="text">Ok1</div>
</div>
<div class="card">
  <button>Click</button>
  <div class="text">Ok2</div>
</div>
<div class="card">
  <button>Click</button>
  <div class="text">Ok3</div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
}
.card{
  width: 100px;
  height: 100px;
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.text{
  display: none;
}

JavaScript

const allBtn = document.querySelectorAll('.card button'),
      allText = document.querySelectorAll('.text');

const openMenu = ()=>{
  openMenuList.style.opacity = '1';
}
  
allBtn.forEach(function(item, i, allBtn){
  item.addEventListener('click', openMenu);
  });