重复div元素n次

Question

how can i duplicate a div so there n copies using javascript or jquery this is the HTML div :

  <div id="Guest_details_and_servicesDIV" style="background-color: white;min-height: 128px;display:none;"> @{ int TotalNumberofPersons = Model.ViewModel_SessionObject.Parameters.SearchCriteria_NumberOfChildrenPerRoom + Model.ViewModel_SessionObject.Parameters.SearchCriteria_NumberOfAdultsPerRoom; } @*<p style="margin-left: 27px;">Room1 : Deluxe Double Room / Best Available Rate </p>*@ <div style="max-width: 100%;width: 500px;border: 1px gray solid;margin-left: 46px;margin-top: 8px;"> <p>Guest names :</p> <table style="width: 500px;"> @for (int i = 0; i < TotalNumberofPersons; i++) { <tr> <td> <select class="dropdown form-control" style="max-width: 75px;"> <option selected="selected">MR</option> <option>MRS</option> </select> </td> <td><input style="margin-left: -5px;" type="text" class="form-control" placeholder="prename" /></td> <td><input type="text" class="form-control" placeholder="surname" /></td> </tr> } </table> </div> <div style="border: 1px gray solid;max-width: 100%;width: 500px;margin-left: 46px;margin-top: 8px;"> <table class="vi_table" style="width: 500px;"> <tr class="pv" style="border: 1px gray solid;"> <td>services:</td> <td></td> </tr> @foreach (var item in Model.ViewModel_SessionObject.HotelAvailabilityRSObject.Services) { HotelDetailsRSService HotelService = Model.ViewModel_SessionObject.HotelDetailsRSObject.GetHotelService(item.ServiceCode); <tr class="pv" style="border: 1px gray solid;cursor: pointer;"> <td>@HotelService.Name :</td> <td>@HotelService.Notes</td> <td> @HotelService.Price.ToString("N2") @Model.ViewModel_SessionObject.HotelAvailabilityRSObject.CurrencyCode </td> <td><input type="checkbox" class="v_checkbox" /> </td> </tr> } </table> </div> </div> 

and this is my jquery code but not working here what i want to do :

  for (var i = 0; i < Product.SelectedRooms; i++) {

                         $('#Guest_details_and_servicesDIV').show()

                         jQuery("#Guest_details_and_servicesDIV").append(jQuery("#Guest_details_and_servicesDIV"));

                     }

Answer 1

Not sure if appending a plain JQuery-object will work. You better go with jQuery("#Guest_details_and_servicesDIV").append(jQuery("#Guest_details_and_servicesDIV"). html());