JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
  <button class="delete-btn hidden">Delete</button>
  <span class="my">trigger</span>
</div>

<div class="item">
  <button class="delete-btn hidden">Delete</button>
  <span class="my">trigger</span>
</div>

<div class="item">
  <button class="delete-btn hidden">Delete</button>
  <span class="my">trigger</span>
</div>

<div class="item">
  <button class="delete-btn hidden">Delete</button>
  <span class="my">trigger</span>
</div>

<div class="item">
  <button class="delete-btn hidden">Delete</button>
  <span class="my">trigger</span>
</div>

CSS

.hidden{ visibility: hidden; }
.my{ cursor: pointer; }

JavaScript

const triggers = document.querySelectorAll(".my")
triggers.forEach((trigger) => {
  trigger.addEventListener("click", () => {
    const deleteButtons = document.querySelectorAll(".delete-btn")
    deleteButtons.forEach(button => button.classList.add("hidden") )
  
    const deleteButton = trigger.parentNode.querySelector(".delete-btn")
    deleteButton.classList.toggle("hidden")
  })
})