もっと内側のdivsを追加するjquery

Question

私はdiv形式のフォームフィールドを持っています。さらにボタンを追加するとdivそのものになります。addMoreボタンをクリックすると、このdivがすべて追加されます。

<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> 

私はどのようにそれを行うことができるプロセスを知りたいと思います。

Answer 1

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

私は実際にちょうど彼らの質問を削除した誰かのためにこれを作りました。

<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> 

Answer 2

<script type="text/javascript" language="JavaScript"> 
    $(document).ready(function() { 
     var buildingCount=1; 
     $(".addBuilding").click(function() { 
      //alert(coming here); 
      $('#buildingInfo').append('<div class="line line-dashed line-lg pull-in"></div><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="'+buildingCount+'" name="hostel['+buildingCount+'][building]" id="hostel_'+buildingCount+'_building" class="form-control rounded"><option> Select Buildings</option><option>Building 1 </option><option>Building 2 </option><option>Building 3 </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="'+buildingCount+'" name="hostel['+buildingCount+'][floor]" id="hostel_'+buildingCount+'floor" class="form-control rounded"><option> Select Floors</option><option>Floor 1 </option><option>Floor 2 </option><option>Floor 3 </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="'+buildingCount+'" name="hostel['+buildingCount+'][flat]" id="hostel_'+buildingCount+'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></select></div></div><div class="col-sm-6"><label class="col-sm-4 control-label">Rooms </label><div class="col-sm-8"><select count="'+buildingCount+'" name="hostel['+buildingCount+'][room]" id="hostel_'+buildingCount+'room" class="form-control rounded"><option> Select Rooms</option><option>Room 1 </option><option>Room 2 </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="'+buildingCount+'" name="hostel['+buildingCount+'][bed]" id="hostel_'+buildingCount+'bed" class="form-control rounded" placeholder="select Rooms" value="" /></div></div><div class="col-sm-6 text-center"><button type="button" class="btn btn-info btn-s-xs removeBuilding" id="'+buildingCount+'" >- Remove Building</button></div></div></div>'); 
      buildingCount++; 
      console.log(buildingCount); 
     }); 

     $("#buildingInfo").on('click','.removeBuilding',function(){ 
      console.log($(this).parent()); 
      $(this).parent().parent().remove(); 
     }); 
    }); 
    <script>