Ruby on Rails clipboard-rails dynamic url copy issue - ruby-on-rails

Question

So I wanted to copy the url of each resource to the clipboard so I tried:
<% #posts.each do |post|%>
<script>
$(document).ready(function(){
var clipboard = new Clipboard('.clipboard-btn');
console.log(clipboard);
});
</script>
<textarea id="bar"><%= post_path(post)%></textarea>
<button class="clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#bar">
Copy to clipboard
</button>
<% end %>
But the problem with that was it only copied the url of the first resource. So I tried this:
<% #posts.each do |post|%>
<script>
$(document).ready(function(){
var clipboard = new Clipboard('.clipboard-btn<%=post.id%>');
console.log(clipboard);
});
</script>
<textarea id="bar<%=post.id%>"><%= post_path(post)%></textarea>
<button class="clipboard-btn<%=post.id%>" data-clipboard-action="copy" data-clipboard-target="#bar<%=post.id%>">
Copy to clipboard
</button>
<% end %>
without any luck

Answer 1

You can move your script outside the iteration, in order to create just one, not one for each of your posts inside #posts, and to use a way to match each element in the DOM with class starting with clipboard-btn, so you don't need to add the id, like:
<% #posts.each do |post|%>
<textarea id="bar<%= post.id %>">
<%= post_path(post) %>
</textarea>
<button
class="clipboard-btn<%= post.id %>"
data-clipboard-action="copy"
data-clipboard-target="#bar<%= post.id %>">
Copy to clipboard
</button>
<% end %>
<script>
$(document).ready(function(){
var clipboard = new Clipboard('[class^="clipboard-btn"]');
});
</script>
As example:
$(document).ready(function() {
var clipboard = new Clipboard('[class^="clipboard-btn"]');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
<textarea id="bar1">Some content 1</textarea>
<button class="clipboard-btn1" data-clipboard-action="copy" data-clipboard-target="#bar1">
Copy to clipboard
</button>
<br>
<textarea id="bar2">Some content 2</textarea>
<button class="clipboard-btn2" data-clipboard-action="copy" data-clipboard-target="#bar2">
Copy to clipboard
</button>
<br>
<textarea id="bar3">Some content 3</textarea>
<button class="clipboard-btn3" data-clipboard-action="copy" data-clipboard-target="#bar3">
Copy to clipboard
</button>
<br>

Answer 2

You cannot copy multiple target elements at once. However, you can use some more advanced options in the imperative api for that:
new Clipboard('.clipboard-btn', {
text: function(trigger) {
var a = document.querySelector('#a').value;
var b = document.querySelector('#b').value;
return a + b;
}
});