I have a div as the parent element with lot of input elements as the children. I don't know about the count of the elements before hand or what type of input elements they will be. This div(parent) is considered as a page. Upon clicking of add button there should be new page. Now what's the best way to do that:

1. Clone and add.
2. Maintain a array which will be holding pages value. Upon adding new empty element will be added to the array. Upon switching between pages corresponding array element will be displayed in DOM.

If I go with first option, it will add up in the DOM. So will it be more complex to handle, time consuming(user experience wise)??. How badly it will affect the site if I am going to maintain up to 100 pages??.

If I go with second option, how should I maintain one array instance throughout the lifecycle of the page?? I can achieve this using JS class, but will it be more complex or error prone, as in will the values be kept hold till I refresh the page??. I haven't used JS classes that much so bit skeptical.

Or is there any other better solution.

This is how my page and script looks like

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>

Thanks in advance.