JSFiddle - React, Tailwind, and code Playground

by crucify

HTML

<button type="button" class="copyForExcel" data-title="title1" data-option="option1" data-sku1="sku11" data-sku2="sku21">click to copy 1</button><br>
<button type="button" class="copyForExcel" data-title="title2" data-option="option2" data-sku1="sku12" data-sku2="sku22">click to copy 2</button><br>
<button type="button" class="copyForExcel" data-title="title3" data-option="option3" data-sku1="sku13" data-sku2="sku23">click to copy 3</button><br>

JavaScript

document.querySelectorAll('.copyForExcel').forEach(el => {
  el.addEventListener('click', event => {
    navigator.clipboard.writeText(`${el.dataset.title}\t${el.dataset.option}\t${el.dataset.sku1}\t${el.dataset.sku2}`);
    const origText = el.innerText;
    el.innerText = '복사되었습니다.';
    setTimeout(() => {
      el.innerText = origText;
    }, 1000);
  });
});