Работает только клик по первому элементу

[Leon2110]

Здравствуйте, проблема такая: есть сайт на bootstrap, я вывожу список материалов, у каждого материала есть кнопка "поделиться", при клике на нее должно сверху браузера выходить уведомление, что ссылка скопирована. Я сделал эти уведомления на Bootstrap Alerts, вот как это работает, все просто:

На сайте, сверху есть блок для показа уведомлений (пустой пока)

<div id="liveAlertPlaceholder" class="alert-message"></div>

В каждом материале (их 10шт на странице) есть кнопка с id liveAlertBtn (я понимаю что нельзя один id 10 раз, но пока так:

<a href="##" class="share" id="liveAlertBtn">Поделиться</a>

В js из документации бутстрапа:

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
    var wrapper = document.createElement('div')
    wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

    alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
    alertTrigger.addEventListener('click', function () {
        alert('Ссылка успешно скопирована в буфер обмена и отправлена в диалог между нами.', 'success')
        // Скрываем алерт через 4 секунды
        window.setTimeout(function () { $(".alert-success").alert('close'); }, 4000);
    })
}

Нужно думаю как-то изменить js, (возможно 2 и 12 строки js) чтобы работало не с id getElementById, а с классом share например (он там есть). Туплю не получается исправить.

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

[voraa]

(я понимаю что нельзя один id 10 раз, но пока так:

Поэтому пока и не работает. getElementById находит только первый элемент с таким ид.
По классу можно найти элемент используя querySelector. Но он тоже найдет только первый. Не видя всей разметки, как там у вас организованы блоки ваших материалов, подсказать трудно.

[рони]

Leon2110,

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')

        function alert(message, type) {
            var wrapper = document.createElement('div')
            wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

            alertPlaceholder.append(wrapper)
        }

        document.addEventListener('click', function(event) {
            if (!event.target.closest('[id=liveAlertBtn]')) return;
            alert('Ссылка успешно скопирована в буфер обмена и отправлена в диалог между нами.', 'success')
            // Скрываем алерт через 4 секунды
            window.setTimeout(function() {
                $(".alert-success").alert('close');
            }, 4000);
        })

[Leon2110]

рони, Спасибо, это работает как нужно