<script>
   document.addEventListener('DOMContentLoaded', function() {
     const copyToClipboardGroups = document.querySelectorAll('[copy-to-clipboard="group"]');
   
     copyToClipboardGroups.forEach(group => {
       const codeElement = group.querySelector('[copy-to-clipboard="code-text"]');
       const buttonElement = group.querySelector('[copy-to-clipboard="copy-button"]');
       const textElement = group.querySelector('[copy-to-clipboard="copy-text"]');
   
       if (codeElement && buttonElement && textElement) {
         const codeText = codeElement.textContent;
         const defaultButtonText = textElement.textContent;
   
         buttonElement.addEventListener('click', async () => {
           try {
             await copyToClipboard(codeText);
             setButtonText('Copied');
             setTimeout(() => setButtonText(defaultButtonText), 2000);
           } catch (err) {
             setButtonText('Failed to copy');
             setTimeout(() => setButtonText(defaultButtonText), 2000);
           }
         });
   
         const setButtonText = (text) => {
           textElement.textContent = text;
           if (text === 'Copying') {
             buttonElement.disabled = true;
           } else {
             buttonElement.disabled = false;
           }
         };
   
         const copyToClipboard = async (text) => {
           setButtonText('Copying');
           try {
             await navigator.clipboard.writeText(text);
           } catch (err) {
             console.error('Failed to copy text: ', err);
             throw err;
           }
         };
       }
     });
   });
</script>