Я с помощью скрипта сделал клоны
<div id="conteiner-form" class="conteiner-form">
блока, это формы для заполнение, чтобы ее открыть нужно нажать кнопку с плюсом, так вот как сделать чтобы все кнопки с плюсом работали и кнопки которые есть в самой форме?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="di123">
<div id="conteiner-form" class="conteiner-form">
<button class="menu">+</button>
<div id="content-menu">
<button class="close">Скрыть</button>
<input type="text" class="input">
<textarea class="text"></textarea>
<button class="read">Вывести</button>
<button class="del">Очистить список задач</button>
</div>
<h3 class="out"></h3>
</div>
</div>
<div>
<button class="accordion">Понедельник</button>
<div class="panel">
</div>
<button class="accordion">Вторник</button>
<div class="panel">
</div>
<button class="accordion">Среда</button>
<div class="panel">
</div>
<button class="accordion">Четверг</button>
<div class="panel">
</div>
<button class="accordion">Пятница</button>
<div class="panel">
</div>
<button class="accordion">Суббота</button>
<div class="panel">
</div>
<button class="accordion">Воскресенье</button>
<div class="panel">
</div>
</div>
<script type="module" src="script.js"></script>
<script type="module" src="listScript.js"></script>
</body>
</html>
import {fan1, heaList, todoList} from './listScript.js';
//let di123 = document.getElementById('di123');
//di123.style.display = "none";
let contentMenu = document.getElementById('content-menu');
contentMenu.style.display = "none";
let buttonMenu = document.getElementsByClassName('menu');
for (let i = 0; i < buttonMenu.length; i++) {
buttonMenu[i].addEventListener("click", function() {
contentMenu.style.display = 'block';
});
}
let button = document.querySelector('.read');
button.onclick = () =>{
fan1();
//contentMenu.style.display = 'none';
};
let close = document.querySelector('.close');
close.onclick = () =>{
contentMenu.style.display = 'none';
};
let del = document.querySelector('.del');
del.onclick = () => {
document.querySelector('.out').innerHTML = '';
heaList.length = 0;
todoList.length = 0;
}
let acc = document.getElementsByClassName("accordion");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
let panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
One();
function One () {
let div = document.querySelector('.conteiner-form');
let newDiv = document.getElementsByClassName('panel');
for (let j = 0; j < newDiv.length; j++) {
let clone= div.cloneNode(true);
newDiv[j].append(clone);
}
}