Как показать уведомление о копировании в JavaScript?

Помогите с отображением сообщения о копировании текста

Привет всем! Я начинающий разработчик и создаю сайт с мотивационными фразами. У меня есть страница с цитатами и кнопками копирования под каждой из них.

Все работает нормально, но пользователи не понимают, что текст скопирован. Мне нужно показывать сообщение “Скопировано” при нажатии на кнопку копирования.

Вот упрощенный пример моего кода:

const container = document.querySelector('.quotes-container');
const itemsPerPage = document.querySelector('select[name="items-count"]');
const currentPage = document.querySelector('input[name="current-page"]');

let quotesData = [];

const displayQuotes = () => {
  container.innerHTML = '';
  const quotesToShow = getPageData(quotesData, getItemsCount(), getCurrentPage());
  const wrapper = document.createElement('div');
  wrapper.innerHTML = quotesToShow.map(item => 
    `<div class='quote-item'>
       <p class='quote-text'>${item.text}</p>
       <div>
         <button class="copy-btn btn">Копировать</button>
         <span class="copy-notification">Скопировано</span>
       </div>
     </div>`
  ).join('');
  container.append(wrapper);
};

const loadQuotes = async () => {
  return [
    { text: "Успех приходит к тем, кто не сдается." },
    { text: "Мечты сбываются у тех, кто в них верит." },
    { text: "Каждый день - новая возможность." },
    { text: "Будь собой, это твоя суперсила." }
  ];
};

document.querySelector('.quotes-container').addEventListener('click', function(event) {
  if (event.target && event.target.matches('.copy-btn')) {
    const textToCopy = event.target.parentNode.closest('.quote-item')
      .querySelector('.quote-text').textContent;
    
    const tempInput = document.createElement('textarea');
    tempInput.value = textToCopy;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    tempInput.remove();
  }
});

Проблема в том, что элемент с уведомлением создается динамически через JavaScript, и я не могу понять, как сделать так, чтобы он показывался только при клике на соответствующую кнопку и исчезал через несколько секунд.

Как правильно реализовать показ и скрытие уведомления для каждой кнопки отдельно?

Проще всего добавить класс для уведомления. В CSS: .copy-notification.show { display: block; opacity: 1; }. В JS после копирования добавляй класс show: const notification = event.target.nextElementSibling; notification.classList.add('show'); Потом через setTimeout убираешь класс. Уведомление появится плавно и будет работать для каждой кнопки.

Попробуй navigator.clipboard.writeText() — работает лучше чем старый document.execCommand. После копирования найди нужный .copy-notification через event.target.parentNode.querySelector(), покажи его и через setTimeout спрячь через пару секунд. Можешь добавить класс для анимации.

В обработчике клика покажи уведомление после копирования. Используй event.target.nextElementSibling чтобы найти соседний span и показать его через стили. Через setTimeout(() => notification.style.display = 'none', 2000) прячь обратно. В CSS добавь .copy-notification { display: none; } по умолчанию.