title: How to copy text, which is in a for-each loop, to clipboard when button is clicked?
body: <p>I have a for-each loop which prints out some text from a database and also displays a button. So essentially I have multiple "areas" of text and each with their own button. I want it so that whenever a user clicks on a button, that specific text it is matched up with is copied to the clipboard.</p>
  
  <p>I tried doing multiple searches on this before posting on here. However, from the other solutions, I read they more or less show a solution for copying text in an input tag. However, in my case the user is not typing anything in that needs to get copied - the text is already on the screen and can't be changed.</p>
  
  <p>I am having trouble with copying that specific text that matches a button since the text does not have a specific id or class name because it is just printing text as it goes through the loop, so they all have the same class name. So how would I specify a specific text with that button, since the buttons could get pressed in any order?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;c:forEach items="${items}" var="item"&gt;
  &lt;h2&gt;${item.itemDescription}&lt;/h2&gt;
  &lt;input class="big-button" type="button" value="Add item copied to clipboard" id="btn" onclick="status(this)"&gt;
  &lt;/c:forEach&gt;
  </code></pre>
  
  <p>JavaScript: </p>
  
  <pre><code>function status(clickedBtn) 
    {
      clickedBtn.value = "Copied to clipboard";
      clickedBtn.disabled = true;
      clickedBtn.style.color = 'white';
      clickedBtn.style.background = 'gray';
    }
  </code></pre>