I need to create a form, Inside of the form, there are smaller forms which will be generated according to user-specified number?

Question

I have created a form using HTML, JS. The current form is unable to create a subform inside itself. It can be explained as Imagine a dynamic Table and we create a button which on clicked to create new rows. Similarly, I want to create a button which adds a form(textboxes, dropdowns, rich content editors, tables, etc inside it) inside a static Form around it.

I tried creating velocimacro but then realised macros cannot be called in function. I tried creating the form in Javascript but several fields became impossible to create.

Expected Results: The button will be able to add subforms to the original form whenever clicked.

Answer 1

I really hope you read what Daan suggested.

Anyway, this is a small taster. If you want more different elements created, i suggest Google.

function createNewForm(form) {
        newForm = document.createElement('form');

        input = document.createElement('input');
        input.type = "text";
        input.value = "new text input";

        button = document.createElement('button');
        button.type = "button";
        button.innerText = "new button";

        newForm.appendChild(input);
        newForm.appendChild(button);

        form.appendChild(newForm);

        console.log(form);
}

<form action="">
        <input type="text" value="hello">
        <button type="button" onclick="createNewForm(this.form)">create form</button>
</form>