Скрипт копирования данных из div?

Question

[art style]

<div class="copybox">
<div class="copyhead"></div><div class="one"></div><button class="copybtn1" type="button">Copy</button>
<div class="copyhead"></div><div class="two"></div><button class="copybtn2" type="button">Copy</button>
<div class="copyhead"></div><div class="three"></div><button class="copybtn3" type="button">Copy</button>
<div class="copyhead"></div><div class="four"></div><button class="copybtn4" type="button">Copy</button>
</div>

Хочу по кнопке btn1-4 копировать данные из one/two/three/four в буфер обмена. в каждом диве будут разные данные построчно. и разные кнопки. как это сделать максимально юзабельно без дальнейшего геморроя с совместимостью? в идеале просто копировать innerhtml блока который позади кнопки

Answer 1

[0xD34F]

document.querySelector('.copybox').addEventListener('click', ({ target: t }) => {
  if (t.tagName === 'BUTTON') {
    navigator.clipboard.writeText(t.previousElementSibling.textContent);
  }
});

Comments

[art style]

Если не сложно, можно пояснить за каждую строчку чтоб я мог разобраться ?

[art style]

я извиняюсь, а как скопировать теперь содержание самой кнопки? переместил во внутрь button содержимое
просто navigator.clipboard.writeText(t.textContent); не работает

Answer 2

[RomanKudlatov]

node.previousSibling пробовал?