JSFiddle - React, Tailwind, and code Playground

HTML

<form class="form-horizontal row-fluid" id='form1'>
  <div id="original-form">
  <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>
  </div>
  <div id="add-more"></div>
</form>
<p><a href="#" id="add">Add More...</a></p>

JavaScript

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);
});