repeat div element n times

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