JSFiddle - React, Tailwind, and code Playground

by Max Belov

HTML

<div class="copy-block">
<div class="copied">Скопировано</div>
<span class="just-link-black" onclick="CopyToClipboard('111')">Скопировать</span>
<div id="111" class="inside-text-copy bg-gray pre-line">any text 1</div>
</div>


<div class="copy-block">
<div class="copied">Скопировано</div>
<span class="just-link-black" onclick="CopyToClipboard('222')">Скопировать</span>
<div id="222" class="inside-text-copy bg-gray pre-line">any text 2</div>
</div>

CSS

.copy-block .copied {
    position: absolute;
    color: #6dab3c;
    font-weight: bold;
    z-index: 99;
    width: auto;
    display: none;
    left: 115px;
}
.copy-block .inside-text-copy {
    padding: 30px;
    margin-top: 30px;
    border: 2px solid rgba(234, 198, 19, 0.25098039215686274);
}

JavaScript

function CopyToClipboard (containerid) {

jQuery(function($){
$(document).ready(function(){
       $(".copied").show().fadeOut(1200);

});
});

  // Create a new textarea element and give it id='temp_element'
  var textarea = document.createElement('textarea')
  textarea.id = 'temp_element'
  // Optional step to make less noise on the page, if any!
  textarea.style.height = 0
  // Now append it to your page somewhere, I chose <body>
  document.body.appendChild(textarea)
  // Give our textarea a value of whatever inside the div of id=containerid
  textarea.value = document.getElementById(containerid).innerText
  // Now copy whatever inside the textarea to clipboard
  var selector = document.querySelector('#temp_element')
  selector.select()
  document.execCommand('copy')
  // Remove the textarea
  document.body.removeChild(textarea)
}