JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<button id="copy_1" data-clipboard-text="Link 1" class="copy-link">Copy link</button><br/>
<button id="copy_2" data-clipboard-text="Link 2" class="copy-link">Copy link</button><br/>
<button id="copy_3" data-clipboard-text="Link 3" class="copy-link">Copy link</button><br/>
<button id="copy_4" data-clipboard-text="Link 4" class="copy-link">Copy link</button><br/>
<button id="copy_5" data-clipboard-text="Link 5" class="copy-link">Copy link</button><br/>

JavaScript

var cb = new ClipboardJS('.copy-link');
$('.copy-link').on('click', function() {
  //get a reference to the JQUERY object of the current button
  var theButton = $(this);
  var copy_id = $(this).attr('id');

  var clipboard = new ClipboardJS( '#' + copy_id );

  clipboard.on('success', function(e) {
    //use the .text method of the Jquery object
    theButton.text('Copied');
    setTimeout(function() {
      //same again
      theButton.text('Copy link');
    }, 1000);
  });

});