JSFiddle - React, Tailwind, and code Playground

by kicken

HTML

<p>
Status: <span id="statusOutput"></span>
</p>
<div>
  <div class='copy-content'>#1</div>
  <br>
  <a href='updatecopypaste.php?id=1'>E</a>
  &nbsp &nbsp
  <a class='leftf' href='deletecopypaste.php?id=1'>X</a>
  &nbsp &nbsp
  <button name='copy-button' class='unstyled-button'>C</button>
</div>
<br><br>
<div>
  <div class='copy-content'>#2</div>
  <br>
  <a href='updatecopypaste.php?id=1'>E</a>
  &nbsp &nbsp
  <a class='leftf' href='deletecopypaste.php?id=1'>X</a>
  &nbsp &nbsp
  <button name='copy-button' class='unstyled-button'>C</button>
</div>
<br><br>
<div>
  <div class='copy-content'>#3</div>
  <br>
  <a href='updatecopypaste.php?id=1'>E</a>
  &nbsp &nbsp
  <a class='leftf' href='deletecopypaste.php?id=1'>X</a>
  &nbsp &nbsp
  <button name='copy-button' class='unstyled-button'>C</button>
</div>
<br><br>

JavaScript

window.addEventListener('DOMContentLoaded',()=>{
	//Demo output
	const statusOutput = document.getElementById('statusOutput');
  
  //Find all the copy buttons
	document.querySelectorAll('button[name="copy-button"]').forEach((button)=>{
  	//Add a click handler to each of the buttons
    button.addEventListener('click', (e)=>{
    	//Locate the copy-content element
      const copyContent = button.parentElement.querySelector('.copy-content');
      //Do the copy
      copyToClipboard(copyContent);
      
      //Demo output
      statusOutput.textContent = 'Copied content: '+copyContent.innerHTML;
    });
  });
});

function copyToClipboard(e) {
  const tempItem = document.createElement('input');

  tempItem.setAttribute('type','text');
  tempItem.setAttribute('display','none');

  let content = e;
  if (e instanceof HTMLElement) {
    content = e.innerHTML;
  }

  tempItem.setAttribute('value',content);
  document.body.appendChild(tempItem);

  tempItem.select();
  document.execCommand('Copy');

  tempItem.parentElement.removeChild(tempItem);
}