How to automatically insert HTML to a form and obtain the inputs? For a form I got the markup below, it belongs to an input category and as there can be more than one insertion at it I includded an Añadir button (Add).

I give id="posgrado1" to first div and using Java Script I increment the id's to posgrado2, posgrado3, ... posgrado#n

&lt;div class="form-group" id="posgrado1"&gt;

    &lt;label for="checkPosgrado" class="col-xs-2 control-label"&gt;Estudios de Posgrado&lt;/label&gt;

    &lt;div class="col-xs-2"&gt;
        &lt;select class="form-control inputPosgradoTipo"&gt;
            &lt;option&gt;Especialidad&lt;/option&gt;
            &lt;option&gt;Maestría&lt;/option&gt;
            &lt;option&gt;Doctorado&lt;/option&gt;
        &lt;/select&gt;               
    &lt;/div&gt;

    &lt;div class="col-xs-4"&gt;
        &lt;input type="text" class="form-control inputPosgradoTitulo" placeholder="Título"&gt;                       
    &lt;/div&gt;

    &lt;div class="col-xs-3"&gt;
        &lt;input type="text" class="form-control inputPosgradoCedula" placeholder="Cédula"&gt;
    &lt;/div&gt;

    &lt;div class="col-xs-1"&gt;
        &lt;input type="button" class="form-control btnAñadirPosgrado" value="Añadir"&gt;
    &lt;/div&gt;
&lt;/div&gt;


Each html within a class got a class identifying the type of input.

So far this is how I add more input instances:

numPosgrados = 1

function agregarPosgrado () {


    var markupPosgrado="";
    markupPosgrado += "                    &lt;div class=\"form-group\" id=\"posgrado";
    markupPosgrado += (++numPosgrados)+"\"&gt;";
    markupPosgrado += "                        ";
    markupPosgrado += "                        &lt;label for=\"checkPosgrado\" class=\"col-xs-2 control-label\"&gt;&lt;\/label&gt;";
    markupPosgrado += "";
    markupPosgrado += "                        &lt;div class=\"col-xs-2\"&gt;";
    markupPosgrado += "                            &lt;select class=\"form-control inputPosgradoTipo\"&gt;";
    markupPosgrado += "                                &lt;option&gt;Especialidad&lt;\/option&gt;";
    markupPosgrado += "                                &lt;option&gt;Maestría&lt;\/option&gt;";
    markupPosgrado += "                                &lt;option&gt;Doctorado&lt;\/option&gt;";
    markupPosgrado += "                            &lt;\/select&gt;                ";
    markupPosgrado += "                        &lt;\/div&gt;";
    markupPosgrado += "";
    markupPosgrado += "                        &lt;div class=\"col-xs-4\"&gt;";
    markupPosgrado += "                            &lt;input type=\"text\" class=\"form-control inputPosgradoTitulo\" placeholder=\"Título\"&gt;                        ";
    markupPosgrado += "                        &lt;\/div&gt;";
    markupPosgrado += "";
    markupPosgrado += "                        &lt;div class=\"col-xs-3\"&gt;";
    markupPosgrado += "                            &lt;input type=\"text\" class=\"form-control inputPosgradoCedula\" placeholder=\"Cédula\"&gt;";
    markupPosgrado += "                        &lt;\/div&gt;";
    markupPosgrado += "";
    markupPosgrado += "                    &lt;\/div&gt;";

    $("#posgrado"+(numPosgrados-1)).after(markupPosgrado)
}


For getting the information I'd like to return a JSON, like:

function obtenerPosgrados () {

    return {EachInstance: {eachInputTypesForEach}}
}


This is an example fiddle.

What's a better implementation of this?  Can I take more advance of jQuery or any other JavaScript library?
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.