html - How do I say "add next item", instead of displaying or repeating the fields for each item over again? -

here html have thusly:

<form class="form-horizontal row-fluid" id='form1'>      <div class="control-group">      <label class="control-label" for="basicinput">select item</label>      <div class="controls">        <select tabindex="1" data-placeholder="select here.." class="span8" id="item_name">          <option value="">select product</option>          <option value="category 1">botts</option>          <option value="category 2">bags</option>          <option value="category 3">table</option>          <option value="category 4">tape</option>          <option value="category 4">frame</option>        </select>      </div>    </div>      <div class="control-group">      <label class="control-label" for="basicinput">item price</label>      <div class="controls">        <div class="input-append">          <input type="text" placeholder="00.000" class="span8" id="item_price"><span class="add-on">r</span>        </div>      </div>    </div>      <div class="control-group">      <label class="control-label" for="basicinput">item quantity</label>      <div class="controls">        <div class="input-append">          <input type="text" placeholder="00.000" class="span8" id="item_quantity" onblur='calculate();'>        </div>      </div>    </div>      <div class="control-group">      <label class="control-label" for="basicinput">total due</label>      <div class="controls">        <div class="input-append">          <input type="text" placeholder="00.000" class="span8" id="total_due" disabled><span class="add-on">r</span>        </div>      </div>    </div>        <hr>        <div class="control-group">      <label class="control-label" for="basicinput">select item</label>      <div class="controls">        <select tabindex="1" data-placeholder="select here.." class="span8" id="item_name2">          <option value="">select product</option>          <option value="category 1">botts</option>          <option value="category 2">bags</option>          <option value="category 3">table</option>          <option value="category 4">tape</option>          <option value="category 4">frame</option>        </select>      </div>    </div>      <div class="control-group">      <label class="control-label" for="basicinput">item price</label>      <div class="controls">        <div class="input-append">          <input type="text" placeholder="00.000" class="span8" id="item_price2"><span class="add-on">r</span>        </div>      </div>    </div>      <div class="control-group">      <label class="control-label" for="basicinput">item quantity</label>      <div class="controls">        <div class="input-append">          <input type="text" placeholder="00.000" class="span8" id="item_quantity2" onblur='calculate2();'>        </div>      </div>    </div>      <div class="control-group">      <label class="control-label" for="basicinput">total due</label>      <div class="controls">        <div class="input-append">          <input type="text" placeholder="00.000" class="span8" id="total_due2" disabled><span class="add-on">r</span>        </div>      </div>    </div>        <hr>      <div class="control-group">      <label class="control-label" for="basicinput">select item</label>      <div class="controls">        <select tabindex="1" data-placeholder="select here.." class="span8" id="item_name3">          <option value="">select product</option>          <option value="category 1">botts</option>          <option value="category 2">bags</option>          <option value="category 3">table</option>          <option value="category 4">tape</option>          <option value="category 4">frame</option>        </select>      </div>    </div>      <div class="control-group">      <label class="control-label" for="basicinput">item price</label>      <div class="controls">        <div class="input-append">          <input type="text" placeholder="00.000" class="span8" id="item_price3"><span class="add-on">r</span>        </div>      </div>    </div>      <div class="control-group">      <label class="control-label" for="basicinput">item quantity</label>      <div class="controls">        <div class="input-append">          <input type="text" placeholder="00.000" class="span8" id="item_quantity3" onblur='calculate3();'>        </div>      </div>    </div>      <div class="control-group">      <label class="control-label" for="basicinput">total due</label>      <div class="controls">        <div class="input-append">          <input type="text" placeholder="00.000" class="span8" id="total_due3" disabled><span class="add-on">r</span>        </div>      </div>    </div>      <hr>      <div class="control-group">      <label class="control-label" for="basicinput">select item</label>      <div class="controls">        <select tabindex="1" data-placeholder="select here.." class="span8" id="item_name4">          <option value="">select product</option>          <option value="category 1">botts</option>          <option value="category 2">bags</option>          <option value="category 3">table</option>          <option value="category 4">tape</option>          <option value="category 4">frame</option>        </select>      </div>    </div>      <div class="control-group">      <label class="control-label" for="basicinput">item price</label>      <div class="controls">        <div class="input-append">          <input type="text" placeholder="00.000" class="span8" id="item_price4"><span class="add-on">r</span>        </div>      </div>    </div>      <div class="control-group">      <label class="control-label" for="basicinput">item quantity</label>      <div class="controls">        <div class="input-append">          <input type="text" placeholder="00.000" class="span8" id="item_quantity4" onblur='calculate4();'>        </div>      </div>    </div>      <div class="control-group">      <label class="control-label" for="basicinput">total due</label>      <div class="controls">        <div class="input-append">          <input type="text" placeholder="00.000" class="span8" id="total_due4" disabled><span class="add-on">r</span>        </div>      </div>    </div>  </form>

to start off, should noted there no way html without copy/pasting on , on again. you'll have add kind of scripting language either server or client side. beginners, recommend javascript since it's simplest use , works out of box.

i'm used working jquery here patched basic javascript. idea is, clicking on "add more" link copies html on , on again each click , appends new <div> element. put html want copy in own <div> can clone/copy elements inside of <div> only.

please note code created took me 5 minutes create, you'll have perfect should enough started.

https://jsfiddle.net/vp56otvt/2/

here of key javascript code used make work:

document.getelementbyid("add").addeventlistener("click", function(e){     e.preventdefault();     var itm = document.getelementbyid("original-form");     var cln = itm.clonenode(true);     document.getelementbyid("add-more").appendchild(document.createelement("hr"));     document.getelementbyid("add-more").appendchild(cln); });