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 deleteButton = trigger.parentNode.querySelector(".delete-btn")
    if (deleteButton.classList.contains("hidden")) {
      const deleteButtons = document.querySelectorAll(".delete-btn")
      deleteButtons.forEach(button => button.classList.add("hidden") )
    }
    deleteButton.classList.toggle("hidden")
  })
})