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

Question

[StepsOnes]

В примере только одна кнопка, но как поступить, если кнопок много?(я же не могу обратиться к конкретной форме или сообщению.) В макете у меня есть множество подобных кнопок, они выводят форму и сообщение. Просто циклом навесить обработчик не получится же

Comments

[Noder SS]

Драсте, пишите все отдельно

[Froggyweb]

Используй делегирование и всплытие событий.
ссылку на нужную форму можно хранить в data-attr кнопки

[StepsOnes]

Froggyweb, можешь подробнее чуть
объяснить?

[StepsOnes]

Froggyweb, кноку то легко найти через метод массивов, а выводить форму через data атрибуты?

[Froggyweb]

StepsOnes, document.addEventListener('click', function(e){
if(e.target.closest('.contacts-btn')) {
//здесь методы показа скрытия формы или загрузки нужной формы с сервера в какой-то блок.
dropdownForm.classList.toggle('none');

}
})

[StepsOnes]

Froggyweb, не понимаю как выводить форму, если их много))

[Сергей delphinpro]

StepsOnes,

<button data-form-id="f1">form1</button>
<button data-form-id="f2">form2</button>

<div id="f1"></div>
<div id="f2"></div>

document.querySelectorAll('button').forEach(btn => {
  const form = document.getElementById(btn.dataset.formId);
  form.style.display = 'block';
})

Принцип ясен?