write a jQuery code, where I have to clone a div on button click. New div should have fresh new dropdown list

JQUERY:

 $("#panel_moreInfoDetails_common3").clone().appendTo("#panel_moreInfoDetails_common2");

I am able to clone the div, but I need dropdown list in it. Notice that my dropdown options are in foreach loop. HTML is given below HTML:

<div class="row" id="panel_moreInfoDetails_common3">
     <div class="delete-moreinfodetails" style="margin-left: 15px;margin-top: 20px;margin-right: 18px;">
         <a data-id="@record.UserFieldIndexNumber" id="button-delete-moreinfodetails" href="javascript:void(0)">
            <i class='icon icon-bin3'></i>
         </a>
     </div>
     <div id="@string.Format("field_{0}_{1}", Model.Page, record.UserFieldIndexNumber)" class="col settings-field @(fields.Contains(string.Format("field_{0}_{1}", Model.Page, record.UserFieldIndexNumber)) ? "hidden" : "")">
        <select class="moreinfo-details" id="@string.Format("field_{0}_{1}", Model.Page, record.UserFieldIndexNumber)" name="@string.Format("field_{0}_{1}", Model.Page, record.UserFieldIndexNumber)" data-field="Info Details">
             <option value="">Select an option</option>
             @foreach (var item in Model.MoreInfoDetailsValues)
             {
                   //selected = record.UserDefinedDropDownField == item.UserDefinedDropDownField ? "selected='selected'" : "";
                   <option data-desc="@item.UserDefinedDropDownField" @selected value="@item.UserDefinedDropDownField">@item.UserDefinedDropDownField</option>
             }
        </select>
     </div>
     <div id="@string.Format("field_{0}_{1}", Model.Page, record.UserFieldIndexNumber)" class="col settings-field @(fields.Contains(string.Format("field_{0}_{1}", Model.Page, record.UserFieldIndexNumber)) ? "hidden" : "")">

          <input data-ufindex="@record.UserFieldIndexNumber" type="text" class="form-control" value="@record.UserFieldValue" />

     </div>
</div>

jsfiddle here

jQuery Documentation

.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

deepWithDataAndEvents (default: value of withDataAndEvents)

A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).

What you are looking for is .clone(true, true)

$("#panel_moreInfoDetails_common3").clone(true, true).appendTo("#panel_moreInfoDetails_common2");