Javascript copy to clipboard function messages doesn't work if used twice

javascript copy string to clipboard
javascript copy to clipboard without input
javascript copy variable to clipboard
angular copy to clipboard
bootstrap copy to clipboard
react-copy-to clipboard
javascript copy table to clipboard
javascript paste from clipboard

I have this code I edited from w3tutorials. When you click on the Hello World button, it says Copied: Welcome Message. However if you click John button, it doesn't say anything. it copies to the clipboard, but doesn't show the "Copied" message.

function myFunction(classID, IDName) {
  var copyText = document.getElementById(classID);
  copyText.select();
  document.execCommand("copy");
  
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied: " + IDName;
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}
body {
  margin: 50px;
}
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
<body>
  <input type="text" value="Hello World" id="welcome">

  <div class="tooltip">
  <button onclick="myFunction('welcome', 'Welcome Message')" onmouseout="outFunc()">
    <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
    Copy text
    </button>
  </div>
  
  <br>
  
  <input type="text" value="John" id="fname">

  <div class="tooltip">
  <button onclick="myFunction('fname', 'First Name')" onmouseout="outFunc()">
    <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
    Copy text
    </button>
  </div>
</body>

ids must be unique. You probably don't want to use any IDs in this code at all. Instead, put each structure in a div so you can relate the elements to each other structurally rather than with IDs (it also eliminates the need for that <br>). For instance, with this structure:

<div class="group">
  <input type="text" value="Hello World">

  <div class="tooltip">
  <button onclick="myFunction(this, 'Welcome Message')" onmouseout="outFunc(this)">
    <span class="tooltiptext">Copy to clipboard</span>
    Copy text
    </button>
  </div>
</div>

Notice that this is passed into the handler functions (really, we should be using modern event handling, but I'm trying not to change too much in one go). this will be the element that function is attached to. Then in the code, it's easy to find the various other elements in that group:

function myFunction(button, IDName) {
  var input = button.closest(".group").querySelector("input");
  input.select();
  document.execCommand("copy");

  var tooltip = button.querySelector(".tooltiptext");
  tooltip.innerHTML = "Copied: " + IDName;
}

function outFunc(button) {
  var tooltip = button.querySelector(".tooltiptext");
  tooltip.innerHTML = "Copy to clipboard";
}

Then of course, as always, we can factor out common code to utility functions:

function myFunction(button, IDName) {
  var input = button.closest(".group").querySelector("input");
  input.select();
  document.execCommand("copy");
  setTooltipForButton(button, "Copied: " + IDName);
}

function outFunc(button) {
  setTooltipForButton(button, "Copy to clipboard");
}

function setTooltipForButton(button, text) {
  button.querySelector(".tooltiptext").innerHTML = text;
}

I should note that that uses Element#closest, which is supported by modern browsers but not in some older ones. You can use a polyfill for older browsers to add it, though.

Live Example:

function myFunction(button, IDName) {
  var input = button.closest(".group").querySelector("input");
  input.select();
  document.execCommand("copy");
  setTooltipForButton(button, "Copied: " + IDName);
}

function outFunc(button) {
  setTooltipForButton(button, "Copy to clipboard");
}

function setTooltipForButton(button, text) {
  button.querySelector(".tooltiptext").innerHTML = text;
}
body {
  margin: 50px;
}
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
<div class="group">
  <input type="text" value="Hello World">

  <div class="tooltip">
  <button onclick="myFunction(this, 'Welcome Message')" onmouseout="outFunc(this)">
    <span class="tooltiptext">Copy to clipboard</span>
    Copy text
    </button>
  </div>
</div>

<div class="group">  
  <input type="text" value="John">

  <div class="tooltip">
  <button onclick="myFunction(this, 'First Name')" onmouseout="outFunc(this)">
    <span class="tooltiptext">Copy to clipboard</span>
    Copy text
    </button>
  </div>
</div>

How To Copy to Clipboard, Copy to clipboard <!-- Trigger --> <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> Copy to clipboard  Right click on the commit that is with annotated tag or notes and select "Copy to Clipboard", the copied messages doesn't include messages of annotated tag or notes What is the expected output? What do you see instead? Copied messages expected to include messages in its annotated tag or notes.

You can't use the same ID more than one time. You can add a counter or a pointer to make the ID unique.

function myFunction(classID, IDName) {
  var copyText = document.getElementById(classID);
  copyText.select();
  document.execCommand("copy");
  
  var tooltip = document.getElementById("myTooltip-" + classID); //modify here
  tooltip.innerHTML = "Copied: " + IDName;
}

function outFunc(classID) {
  var tooltip = document.getElementById("myTooltip-" + classID);//modify here
  tooltip.innerHTML = "Copy to clipboard";
}
body {
  margin: 50px;
}
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
<body>
  <input type="text" value="Hello World" id="welcome">

  <div class="tooltip">
  <button onclick="myFunction('welcome', 'Welcome Message')" onmouseout="outFunc('welcome')"><!--modify here-->
    <span class="tooltiptext" id="myTooltip-welcome"><!--modify here-->Copy to clipboard</span>
    Copy text
    </button>
  </div>
  
  <br>
  
  <input type="text" value="John" id="fname">

  <div class="tooltip">
  <button onclick="myFunction('fname', 'First Name')" onmouseout="outFunc('welcome')"><!--modify here-->
    <span class="tooltiptext" id="myTooltip-fname"><!--modify here-->Copy to clipboard</span>
    Copy text
    </button>
  </div>
</body>

clipboard.js, To make the "copy" button copy the contents of the <input> element, you can use code like this: function copy() { var copyText = document. Clipboard.js is one of those beautiful libraries that with a couple of lines will help you to achieve your goal. Clipboard.js is a modern approach to copy text to clipboard without Flash, it has no dependencies and is lightweight. To initialize clipboard.js, use the following code:

Because of this line: var tooltip = document.getElementById("myTooltip"); , when you click the second button, it's the text in the first tooltip that changes because you can't use the same ID twice.

I edited your code to select the tooltip using the class name and replace each tooltip's text whenever the button is clicked.

Check this codepen: https://codepen.io/anon/pen/YBEJjB

Interact with the clipboard, We covered a great little library, Clipboard.js, that makes it easy to copy text to the it uses a lot of new features like the const keyword and arrow functions. We then make sure that the global selection doesn't contain any range yet, and add on our selection object to deselect the text, and setup a success message that​  A less used feature of JavaScript is to interact with the clipboard of the client computer. This page is intended to provide a demonstration of how to use JavaScript to copy and paste from the clipboard. Browser Issues Google Chrome. This no longer works in Google Chrome. Internet Explorer

Copying to Clipboard Using Vanilla JavaScript ← Alligator.io, Copy to Clipboard with JavaScript. August 28, 2016 by Magnus Benoni. A nice feature is to let users automatically copy some text to their clipboard by clicking a button. I also added a flashing message telling the user that the text was copied: HTML; CSS; JS. Result This Pen doesn't use any external CSS resources. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

Copy to Clipboard with JavaScript, Async Clipboard API is unblocking copy and paste in Chrome 66. Chromium policy on JavaScript dialogs · Building performant expand & collapse copy and paste that has a well-defined permissions model and doesn't block the page. Since this API is asynchronous, the writeText() function returns a Promise that will​  The Clipboard Web API doesn't have this limitation. From version 57 onward, you can copy images to the clipboard using the clipboard.setImageData() API. Support for the Clipboard API's navigator.clipboard.writeText() method was added in Firefox 63. When using content scripts, the Clipboard API is available only for HTTPS pages.

Unblocking Clipboard Access | Web, A less used feature of JavaScript is to interact with the clipboard of the client computer. should be be prompted with this message when you first try to copy or paste. X does not appear to allow any access function copyToClipboard(s) Copy text from another element. A pretty common use case is to copy content from another element. You can do that by adding a data-clipboard-target attribute in your trigger element. The value you include on this attribute needs to match another's element selector.

Comments
  • becuse you have id="myTooltip" twice in your code
  • @KamaleshM.Talaviya So how can I parse the id so it changes the right thing
  • you can pass diffrant id as paramiter while calling function and apply that id to that text span
  • better to use "T.J. Crowder" solution , just pass clicked object and then query(parse) that span using class exist inside that button object , rather than applying id multiple time
  • I've updated my answer a bit, just realized I should have noted you'll need a polyfill for Element#closest on older browsers (but it's a simple one).
  • You can also generate dinamically the tooltip with append w3schools.com/jsref/met_node_appendchild.asp
  • Why not using Jquery?