Abdul Waheed Abdul Waheed - 1 month ago 4
HTML Question

ADD more inner divs jquery

i have form fields which are in div format, and add more button is in that div itself, so when i click on addMore button all this div has to append how can i do that.

<div id="buildingInfo" >
<div class="form-group" >
<div class="control-group">
<div class="col-sm-6">
<label class="col-sm-4 control-label">Buildings </label>
<div class="col-sm-8">
<select count="0" name="hostel[0][building]" id="hostel_0_building" class="form-control rounded">
<option> Select Buildings</option>
<option>Building 1 </option>
<option>Building 2 </option>
<option>Building 3 </option>
<option>Building 4 </option>
<option>Building 5 </option>
</select>
</div>
</div>
<div class="col-sm-6">
<label class="col-sm-4 control-label">Floors </label>
<div class="col-sm-8">
<select count="0" name="hostel[0][floor]" id="hostel_0_floor" class="form-control rounded">
<option> Select Floors</option>
<option>Floor 1 </option>
<option>Floor 2 </option>
<option>Floor 3 </option>
<option>Floor 4 </option>
<option>Floor 5 </option>
<option>Floor 6 </option>
<option>Floor 7 </option>
</select>
</div>
</div>
<div >&nbsp;</div>
<div class="col-sm-6">
<label class="col-sm-4 control-label">Flats</label>
<div class="col-sm-8">
<select count="0" name="hostel[0][flat]" id="hostel_0_flat" class="form-control rounded">
<option> Select Flats</option>
<option>Flat 1 </option>
<option>Flat 2 </option>
<option>Flat 3 </option>
<option>Flat 4 </option>
<option>Flat 5 </option>
<option>Flat 6 </option>
<option>Flat 7 </option>
<option>Flat 8 </option>
<option>Flat 9 </option>
<option>Flat 10 </option>
</select>
</div>
</div>
<div class="col-sm-6">
<label class="col-sm-4 control-label">Rooms </label>
<div class="col-sm-8">
<select count="0" name="hostel[0][room]" id="hostel_0_room" class="form-control rounded">
<option> Select Rooms</option>
<option>Room 1 </option>
<option>Room 2 </option>
<option>Room 3 </option>
<option>Room 4 </option>
<option>Room 5 </option>
<option>Room 6 </option>
<option>Room 7 </option>
<option>Room 8 </option>
<option>Room 9 </option>
<option>Room 10 </option>
</select>
</div>
</div>
<div>&nbsp;</div>
<div class="col-sm-6">
<label class="col-sm-4 control-label">Beds </label>
<div class="col-sm-8">
<input type="number" required="required" min="1" max="40" count="0" name="hostel[0][bed]" id="hostel_0_bed" class="form-control rounded" placeholder="select Rooms" value="" />
</div>
</div>
</div>
<div class="col-sm-6 text-center" >
<button type="button" class="btn btn-info btn-s-xs addBuilding">+ Add More Buildings</button>
</div>
</div>
</div>
</div>


i would like to know the process how can i do that.

Answer

http://codepen.io/unifx/pen/gwkWdy

I actually just made this for someone who deleted their question.

<select class="form-control" id="priceCountSelect" onChange="PriceSelect();">
  <option value="1">Price 1</option>
  <option value="2">Price 2</option>
  <option value="3">Price 3</option>
  <option value="4">Price 4</option>
  <option value="5">Price 5</option>
</select>
<div id="price-container">

</div>
<script>
function PriceSelect() {
  var Prices         = document.getElementById('priceCountSelect');
  var PriceContainer = document.getElementById('price-container');
  var PricesOption   = Prices.options[Prices.selectedIndex].value;

  for(var i = 0; i < PricesOption; i++) {
    alert('this is counted');
    PriceContainer.innerHTML += '<div>Price is 0' + i + '</div>';
  }
}
</script>