Have a script work multiple times with the same class

Question

I am working on an element which fades in & out. Plus, its display goes to 'none'. Preventing it can still be clicked, when it doesn't show.

The idea is that, when the element is faded in, a seperate, second button, allows it to fade out.

I am working wit the following code:

const chat = document.getElementById('chatclouds'),
      
    btn = document.querySelector('.fadechat');

btn.addEventListener('click', function () {
  ////----
  
  if (chat.classList.contains('hidden')) {
    chat.classList.remove('hidden');
    setTimeout(function () {
      chat.classList.remove('visuallyhidden');
    }, 20);
  } else {
    chat.classList.add('visuallyhidden');    
    chat.addEventListener('transitionend', function(e) {
      chat.classList.add('hidden');
    }, {
      capture: false,
      once: true,
      passive: false
    });
  }
  
}, false);

Why is it that the this code will only work on one object using the class; .fadechat? The second button, using the same class, doesn't trigger the code.