Атрыманне DOM элементаў без дубляў

Няхай у нас ёсць абзацы і кнопка:

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

<button>click me</button>

Няхай карыстальнік клікае на гэтыя абзацы ў адвольным парадку. Давайце зробім так, каб па націску на кнопку ў канец кожнага абзаца, на які быў зроблены клік, быў дададзены клічнік. Вырашым задачу праз Set.

Прыступім. Для пачатку атрымаем нашы элементы ў зменныя:

let button = document.querySelector('button');
let elems  = document.querySelectorAll('p');

Стварым новую калекцыю Set:

let set = new Set;

Перабярэм абзацы цыклам і павесім на іх апрацоўшчык кліку:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		
	});
}

Давайце цяпер па кліку на абзац будзем дадаваць гэты абзац у калекцыю:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		set.add(this);
	});
}

З-за таго, што мы выкарыстоўваем калекцыю Set паўторны клік на абзац не будзе прыводзіць да дадавання дубля абзаца.

Давайце цяпер па кліку на кнопку перабярэм змесціва нашай калекцыі і кожнаму абзацу ў канец дадамо клічнік:

button.addEventListener('click', function() {
	for (let elem of set) {
		elem.textContent = elem.textContent + '!';
	}
});

Даны абзацы і кнопка. Карыстальнік клікае на гэтыя абзацы ў адвольным парадку. Зрабіце так, каб па націску на кнопку ў канец кожнага абзаца, на які быў зроблены клік, быў дададзены клічнік.