How to automatically insert HTML to a form and obtain the inputs?
A better way is to use templates. Handlebars should be a good start for this.

Here's a quick demo:

HTML:

&lt;!-- our target --&gt;
&lt;div id="container"&gt;

&lt;/div&gt;

&lt;!-- the template (Note the type. This prevents if from running as a script. --&gt;
&lt;script type="text/template" id="template"&gt;
  {{#each people}}
    &lt;b&gt;{{id}}&lt;/b&gt; : &lt;i&gt;{{name}}&lt;/i&gt;
  {{/each}}
&lt;/script&gt;


JS:

// The data.
var data = {
  people : [
    {
      id : 1,
      name : 'Alice'
    },{
      id : 2,
      name : 'Bob'
    }
  ]
};

// We get the template HTML
var template = $('#template').html();

// Compile it as a handlebars template renderer
var renderer = Handlebars.compile(template);

// and just feed in the data into the renderer to return the HTML with the data
var html = renderer(data);

// Then all we need to do is pop-in the HTML with the data to our page
$('#container').html(html);


The rest is up to you. You can use the demo as your guide. You can use the id of the data as your n. Handlebars also provides you the index if you loop through an array in the template, which you could also use as your n.