Tengo un div como elemento principal con muchos elementos de entrada como elementos secundarios. No sé sobre el recuento de elementos de antemano o qué tipo de elementos de entrada serán. Este div(padre) se considera como una página. Al hacer clic en el botón Agregar, debería haber una nueva página. Ahora, ¿cuál es la mejor manera de hacer eso?

1. Clonar y agregar.
2. Mantenga una matriz que contendrá el valor de las páginas. Al agregar un nuevo elemento vacío, se agregará a la matriz. Al cambiar de página, el elemento de matriz correspondiente se mostrará en DOM.

Si voy con la primera opción, se sumará en el DOM. Entonces, ¿será más complejo de manejar, consumirá más tiempo (en cuanto a la experiencia del usuario)? ¿Qué tan mal afectará al sitio si voy a mantener hasta 100 páginas?

Si elijo la segunda opción, ¿cómo debo mantener una instancia de matriz durante todo el ciclo de vida de la página? Puedo lograr esto usando la clase JS, pero ¿será más complejo o propenso a errores, ya que los valores se mantendrán hasta que actualice la página? No he usado tanto las clases JS, así que un poco escéptico.

O hay alguna otra solución mejor.

Así es como se ve mi página y script

 document.getElementById("add").addEventListener("click", () => { let page1 = document.getElementById("page1"); let newPage = page1.cloneNode(true); let pages = document.getElementById("pages"); pages.appendChild(newPage); }); //Or document.getElementById("add").addEventListener("click", () => { let pages = [{checkbox: "on", txtBox1: "Name", txtBox2: "Email"}]; // how to keep this global pages.push({checkbox: "on", txtBox1: "Me", txtBox2: "me@email.com"}); });

 <div id="pages"> <div id="page1" class="page"> <input type="checkbox"/> <input type="text"/> <input type="text"/> </div> <button id="add">Add</button> </div>

Gracias por adelantado.