PHP Mysql and Javascript - Copy paste for loop

[PNewCode]

Hello. I have the following that works great for the first database entry, but if there is more than one the copy button doesn't copy anything for entry 2, 3, 4, 5, etc.
I suspect this has to do with an id issue. But I don't know how to resolve it. Any help is appreciated a lot.
Note: I got this from a search in google, so I did not create this. I'm also not including any of the info about the database and such because there's no issues with it. My only issue is the copy button only copying the first in the list to the windows clipboard

Here is a shot of what is displayed on the page



Here is the script I am using

////// this is what displays the information. It will show in a list on the page each entry in a row and the copy button under each one //////
////// Each is pulling successfully to display from the database ie movie, name, and link //////

<div id='goodContent'>NOW PLAYING: " . $row["movie"] . " - Requested By - " . $row["name"] . " - Link: " . $row["link"] . "</div>
<button id='clickCopy'>Copy</button>



////// this is the javascript to make the function happen - there are extra elements in it that are not being used because this was created as a way to copy different lines, however I just need one line copied //////


<script>
copyToClipboard(document.getElementById("content"));

document.getElementById("clickCopy").onclick = function() {
	copyToClipboard(document.getElementById("goodContent"));
}

document.getElementById("clickCopyString").onclick = function() {
	copyToClipboard("This is a variable string");
}

/**
* This will copy the innerHTML of an element to the clipboard
* @param element reference OR string
*/
function copyToClipboard(e) {
    var 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);
}
</script>

 

Edited January 12 by PNewCode

[requinix]

2 hours ago, PNewCode said:

I suspect this has to do with an id issue.

That's correct: an ID will only ever refer to one element on the page, so using it for multiple elements is always incorrect.

There's a simple solution for you here. Wrap the NOW PLAYING and the button (both) in a container element, then when the button is clicked, have it locate the container and then find the desired element to copy inside of it.

IIRC:

<div class="copy-container">
	<div class="copy-target">NOW PLAYING: Something</div>
	<button class="copy-button">COPY</button>
</div>

<script>
document
  .querySelectorAll(".copy-container")
  .forEach(container => {
    const target = container.querySelector(".copy-target");
    const button = container.querySelector("btn.copy-button");

    button.addEventListener("click", () => {
      copyToClipboard(target);
    });
  });
</script>

And please don't implement clipboard functions like that - use the actual Clipboard API instead.

[PNewCode]

@requinix Thank you so much for taking the time to make that post. I couldn't get that to actually work at all. Nothing gets copied to the clipboard. And thank you for the link for the clipboard API but I'm lightyears away from being able to read that and know how to make a script out of it. I appreciate it though.

[PNewCode]

Just to share, I found a completely different set up that works. This follows the rules that Requinix said, but structured different.

 

<script>

 function myFunction(el) {
  var hidden = el.previousElementSibling;
  hidden.style.display = 'block';
  hidden.select();
  hidden.setSelectionRange(0, 99999)
  document.execCommand("copy");

  hidden.style.display = 'none';
}

</script>

      <input type='text' style='display:none;' value='NOW PLAYING: " . $row["movie"] . " - Requested By - " . $row["name"] . " - Link: " . $row["link"] . "'>
      <button onclick='myFunction(this)' >Copy</button>