javascript - Dynamically Load Div Elements and Assign IDs -

i understand how dynamically load html, having trouble understanding how load it, assign, , keep track of ids elements inside loaded div.

this main block

<div id="add-equip-container">     <div id="add-equip-content">     </div>     <button id="add-equipment">add more equipment</button>     <button id="submit-equipment">submit equipment</button> </div> 

now, every time add-equipment clicked, want load following block add-equip-content.

<div class="add-equip-form">     <input id="?" type="text" placeholder="equipment description..."/></br>     <input id="?" type="text" placeholder="equipment number"/></br>     <input id="?" type="text" placeholder="other stuff..."/></br> </div> 

each block inserted beneath previous 1 loaded. have no idea how assign , keep track of various ids dished out during operation. love solution not involve jquery. trying lean vanilla javascript before frameworks.

i sure there may question or blog or on already, don't know best keywords search for. time use "dynamically load html" in search keywords, ajax tutorial results.

thanks in advance help!

one solution not load html, create via javascript. useful in case adding same code page, different id's. write function this:

 var form_index = 0;   //elem element appending to.  function addform(elem) {      //create container     var form_container = document.createelement("div");     form_container.classname = "add-equip-form";              //description input     var desc = document.createelement('input');     desc.id = "equip-desc-" + form_index;     desc.type = "text";     desc.placeholder = "equipment description...";      //equipment number input     var num = document.createelement('input');     num.id = "equip-num-" + form_index;     num.type = "text";     num.placeholder = "equipment number";      //other     var other = document.createelement('input');     other.id = "equip-other-" + form_index;     other.type = "text";     desc.placeholder = "other stuff...";      //append inputs     form_container.appendchild(desc);     form_container.appendchild(num);     form_container.appendchild(other);      //append form     elem.appendchild(form_container);      form_index++;    } 

then, access created id's, need know index of containing div within parent elem. see here javascript solution. once have index, getting form data easy using index query based on id's.