Две кнопки копирования в буфер обмена в Elementor ⇐ Javascript

[Anonymous]

Я следую этой статье:
https://element.how/elementor-copy-past ... ard-button
И кнопка работает нормально, но...
У меня на веб-сайте есть две вещи, которые я хочу скопировать: номер телефона и адрес электронной почты.
Я меняю имена и имена переменных, чтобы они были разными, но когда я вставляю код два раза, появляется только одна кнопка.
На его веб-сайте есть пара кнопок, и все работает нормально.
Как я могу изменить код, чтобы он работал для этих двух вещей (имея две отдельные кнопки)?

Код с веб-сайта (чтобы не требовалось входить в систему/регистрироваться):

.copyPaste {
--button-top: 10px;
/* position of button from the top of element */
--button-right: 10px;
/* idem, from the right */
--button-bg-color: #4CAF50;
--button-text-color: #fff;
--button-hover-bg-color: #45a049;
--button-border-radius: 10px;
--button-font-size: 1rem;
--button-font-family: Arial, sans-serif;
--button-icon-fill: #fff;
--button-icon-hover-fill: #f3f3f3;
--button-icon-size: 20px;
--button-icon-margin-right: 6px;
--button-padding: 10px 20px;
--button-border: 2px solid transparent;
--button-transition: background-color 0.3s ease;
--button-icon-transition: fill 0.3s ease;
}

.copyPaste.copyPaste.copyPaste.copyPaste button {
unset: all;
font-family: var(--button-font-family, 'Arial');
font-size: var(--button-font-size, 1rem);
padding: var(--button-padding, 10px 15px);
color: var(--button-text-color, #ffffff);
background-color: var(--button-bg-color, #007bff);
border: var(--button-border, 2px solid transparent);
border-radius: var(--button-border-radius, 5px);
position: absolute;
top: var(--button-top, 10px);
right: var(--button-right, 10px);
transition: var(--button-transition, background-color 0.3s ease);
cursor: pointer;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
}

.copyPaste.copyPaste.copyPaste.copyPaste button:hover {
background-color: var(--button-hover-bg-color, #0056b3);
border-color: var(--button-hover-border-color, transparent);
}

.copyPaste.copyPaste button svg {
fill: var(--button-icon-fill, #ffffff);
stroke: var(--button-icon-stroke, none);
width: var(--button-icon-size, 24px);
height: var(--button-icon-size, 24px);
margin-left: var(--button-icon-margin-right, 8px);
transition: var(--button-icon-transition, fill 0.3s ease);
}

.copyPaste.copyPaste button:hover svg {
fill: var(--button-icon-hover-fill, #ffffff);
}


/* Code from https://element.how/elementor-copy-past ... rd-button/
* Copyright 2024 Element.How
* Add Copy Paste Buttons to Heading and Text Editor Elements
*/

(function () {
if (window.ElementorCopyPasteEnabled) return;
window.ElementorCopyPasteEnabled = true;

const settings = {
buttonText: "Copy",
buttonIconSVG: ``,
confirmationText: "Copied!",
confirmationIconSVG: ``,
};

const copyPasteElements = document.querySelectorAll('.copyPaste');

copyPasteElements.forEach(element => {
const button = document.createElement('button');
button.innerHTML = `${settings.buttonText} ${settings.buttonIconSVG}`;

element.appendChild(button);

button.addEventListener('click', () => {
if (element.classList.contains('copyPasteURL')) {
const url = element.querySelector('[href]').getAttribute('href');
navigator.clipboard.writeText(url);
} else {
const htmlContent = element.firstElementChild.innerHTML;
const plainTextContent = htmlToPlainText(htmlContent); // Convert HTML to plain text while preserving new lines

navigator.clipboard.write([
new ClipboardItem({
'text/html': new Blob([htmlContent], { type: 'text/html' }),
'text/plain': new Blob([plainTextContent], { type: 'text/plain' })
})
]);
}
button.innerHTML = `${settings.confirmationText} ${settings.confirmationIconSVG}`;
let revertTO = setTimeout(() => {
button.innerHTML = `${settings.buttonText} ${settings.buttonIconSVG}`;
}, 4000);
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
clearTimeout(revertTO);
button.innerHTML = `${settings.buttonText} ${settings.buttonIconSVG}`;
}
});
});
});

function htmlToPlainText(html) {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = html;
let text = '';
const walker = document.createTreeWalker(tempDiv, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {
acceptNode: function(node) {
if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'STYLE') {
return NodeFilter.FILTER_REJECT;
}
if (node.nodeType === Node.TEXT_NODE && node.parentNode && node.parentNode.tagName === 'STYLE') {
return NodeFilter.FILTER_REJECT;
}
return NodeFilter.FILTER_ACCEPT;
}
}, false);

while(walker.nextNode()) {
const node = walker.currentNode;
if (node.nodeType === Node.TEXT_NODE) {
text += node.nodeValue;
} else if (node.nodeType === Node.ELEMENT_NODE && (node.nodeName === 'BR' || node.nodeName === 'P' || node.nodeName === 'DIV' || node.nodeName === 'H1' || node.nodeName === 'H2' || node.nodeName === 'H3' || node.nodeName === 'H4' || node.nodeName === 'H5' || node.nodeName === 'H6')) {
text += '\n';
}
}
return text.trim();
}

}());




Подробнее здесь: https://stackoverflow.com/questions/798 ... -elementor