[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 элементам на странице ничего не показывает и ошибку не выводит.