function copyFull() { //copys inner html of target div. //event button var copyBtn = $('.copy-btn'); copyBtn.on('click', function(event) { var $this = $(this); //find the element that has the text you want. var content = $this.prev('.copy-content'); //creates new range object and sets text as boundaries. var range = document.createRange(); range.selectNode(content[0]); window.getSelection().addRange(range); try { // Now that we've selected the text, execute the copy command var successful = document.execCommand('copy'); /*var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copy email command was ' + msg);*/ //handle success $(this).after(''); setTimeout(function() { $('.success').addClass('show'); setTimeout(function() { $('.success').fadeOut(function() { $('.success').remove(); }); }, 1000); }, 0); } catch (err) { //console.log('Oops, unable to copy'); } //clear out range for next event. window.getSelection().removeAllRanges(); }); } function copyPhone() { // same principle. Set a copyBtn, and a target element. In this case they are the same. var copyBtn = $('.phone'); copyBtn.on('click', function(event) { var content = $(this); var range = document.createRange(); range.selectNode(content[0]); window.getSelection().addRange(range); try { var successful = document.execCommand('copy'); $(this).addClass('p-success'); setTimeout(function() { $('.phone').removeClass('p-success'); }, 1000); } catch (err) { // console.log('Oops, unable to copy'); } window.getSelection().removeAllRanges(); }); } $(function() { copyFull(); copyPhone(); });