How to make this copybutton Javascript for many buttons?

Question

Can anyone help to crack out this 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);
  }
}

This javascript is used to copy the text inside a <p> element. My Html Code

<p id="randomstatus">Strangers think I'm Quiet. My Friends think I'm outgoing. My best friends know that I'm Completely Insane</p>
    <button class="copyButton btn" id="copyButton"><i class="fas fa-clipboard"></i>  Copy</button>
    <span class="copyalert">Copied!</span>

This works perfectly for one but I need the copy buttons to place more times in my web page. But I have stucked here. Please help me.

Answer 1

A basic approach is to add an onclick event attribute to each of your buttons that will be used to call your copyClipboard() function

<button class="copyButton btn" id="copyButton" onclick = 'copyClipboard()'><i class="fas fa-clipboard"></i>  Copy</button>
<button class="copyButton btn" id="copyButton1" onclick = 'copyClipboard()'><i class="fas fa-clipboard"></i>  Copy</button>

and change your JavaScript script to this

function copyClipboard() {
    var copyalert = document.querySelector('.copyalert');
    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);
    }
}