How to create copy button using html and javascript?

Question

Hii am new to javascript but by putting my all efforts I have written a javascript to copy text inside a <p></p> elements. In my website I need the copy button many times. But my javascript work for only one copy button. if I used it to another copy button it would copy the first button's respective <p>/p> text. My javascript

const copyButton = document.querySelector('.copyButton');
const copyalert = document.querySelector('.copyalert');

copyButton.addEventListener('click', copyClipboard);

function copyClipboard() {
  var copystatus= document.getElementById("randomstatus");
// for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(copystatus);
    range.select();
    document.execCommand("Copy");
    window.getSelection().removeAllRanges();
    copyalert.classList.add("show");
    setTimeout(function() {copyalert.classList.remove("show")},700);
  }
  else if(window.getSelection) {
// other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(copystatus);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    window.getSelection().removeAllRanges();
    copyalert.classList.add("show");
    setTimeout(function() {copyalert.classList.remove("show")},700);
  }
}

My html

<div>
   <h2 class="statusheading">Latest English quotes</h2>
  <div id="englishquotes">
   <div class="latestquotes">
       <p class=latest>life os good when hou have books</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
</div>
<div class="latestquotes">
       <p class=latest>Google is a open source library</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
   </div>
<div class="latestquotes">
       <p class=latest>Cat is better than dog</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
   </div>
  </div>
  </div>

Answer 1

You just need to let the system knows the id of the text you want to copy , e.g. p1, p2, p3.

Please try this

<div>
   <h2 class="statusheading">Latest English quotes</h2>
  <div id="englishquotes">
   <div class="latestquotes">

       <p><div id=p1>life os good when hou have books</div></p> 
       <button class="copyButton btn" onclick="copyToClipboard('p1')">Copy</button>

</div>

 

<div class="latestquotes">

       <p><div id=p2>Google is a open source library</div></p>
       <button class="copyButton btn" onclick="copyToClipboard('p2')">Copy</button>

   </div>

 

<div class="latestquotes">

       <p><div id=p3>Cat is better than dog</div></p>
       <button class="copyButton btn" onclick="copyToClipboard('p3')">Copy</button>

   </div>
  </div>
  </div>


<script>


function copyToClipboard(var1){
    let val = document.getElementById(var1).innerHTML;
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
    alert('text copied to clipboard, please use Ctrl-V to paste the data');

  }  


</script>