Переезд часть 7.....Хочу кнопку копировать содержимое !!!

<script>
// Автоматически добавляем кнопки ко всем pre элементам
document.addEventListener('DOMContentLoaded', function() {
    const preElements = document.querySelectorAll('pre');
    preElements.forEach((pre, index) => {
        if (!pre.id) {
            pre.id = 'pre-' + index;
        }
        // Создаем контейнер
        const container = document.createElement('div');
        container.style.display = 'flex';
        container.style.alignItems = 'center';
        container.style.margin = '5px 0';
        // Создаем кнопку с SVG
        const button = document.createElement('button');
        button.className = 'copy-btn';
        button.title = 'Копировать код';
        button.innerHTML = `
            <svg viewBox="0 0 24 24">
                <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
            </svg>
        `;
        // Создаем элемент для статуса
        const statusSpan = document.createElement('span');
        statusSpan.id = pre.id + '-status';
        statusSpan.className = 'copy-status';
        // Добавляем обработчик
        button.onclick = function() {
            copyPreContent(pre.id, button);
        };
        // Добавляем элементы в контейнер
        container.appendChild(button);
        container.appendChild(statusSpan);
        // Вставляем контейнер после pre элемента
        pre.parentNode.insertBefore(container, pre.nextSibling);
    });
});
// Функция для копирования
function copyPreContent(preId, button) {
    const preElement = document.getElementById(preId);
    const statusElement = document.getElementById(preId + '-status');
    if (!preElement) return;
    const textToCopy = preElement.textContent;
    navigator.clipboard.writeText(textToCopy)
        .then(() => {
            showStatus(statusElement, 'Скопировано!', 'success');
            button.classList.add('copied');
            setTimeout(() => {
                button.classList.remove('copied');
                hideStatus(statusElement);
            }, 2000);
        })
        .catch(err => {
            console.error('Ошибка:', err);
            showStatus(statusElement, 'Ошибка копирования', 'error');
            setTimeout(() => hideStatus(statusElement), 2000);
        });
}
// Функции для отображения статуса
function showStatus(element, message, type) {
    if (element) {
        element.textContent = message;
        element.className = 'copy-status show ' + type;
    }
}
function hideStatus(element) {
    if (element) {
        element.className = 'copy-status';
    }
}	
</script>
<style>
	.copy-btn {
		margin-left: 10px;
		padding: 6px;
		border: 1px solid #ddd;
		border-radius: 4px;
		background: white;
		cursor: pointer;
		transition: all 0.2s ease;
	}
	.copy-btn:hover {
		background: #f5f5f5;
		border-color: #ccc;
	}
	.copy-btn.copied {
		background: #e8f5e8;
		border-color: #4caf50;
	}
	.copy-btn svg {
		width: 16px;
		height: 16px;
		fill: #666;
	}
	.copy-btn:hover svg {
		fill: #333;
	}
	.copy-btn.copied svg {
		fill: #4caf50;
	}
	.copy-status {
		margin-left: 10px;
		font-size: 12px;
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	.copy-status.show {
		opacity: 1;
	}
	.copy-status.success {
		color: #4caf50;
	}
	.copy-status.error {
		color: #f44336;
	}
</style>