Dropdownlist does not appear when append duplicate div in MVC

Question

I have a div of Spouse Information. When clicking on add button I append duplicate div below the first. But the Dorpdownlist for HomeDistrict does not appear in the append div though level and other input tag works fine. I have added the div that I appended. Everything works fine except dropdownlist.

<div class=" card-body">
 <button class="btn-success text-right addspousBtn"><i class="icon icon-plus-square"> </i>Add New Spous</button>
                        <div class="form-row mt-1 SpousDiv">
                            <div class="col-6">
                                <div class="form-group col-12 m-0">
                                    <label for="Username" class="col-form-label s-12"><i class="icon-user mr-2"></i>Name</label>
                                    <input placeholder="Enter Name" class="form-control r-0 light s-12 SpousName" type="text" required>
                                </div>
                                <div class="form-group col-12 m-0">
                                    <label for="District" class="col-form-label s-12"><i class="icon-address-card mr-2"></i>Home District</label>
                                    <select class="custom-select select2 select2-hidden-accessible HomeDistrict" required="" tabindex="-1" aria-hidden="true">
                                        <option value="">-Select Home District-</option>
                                        @foreach (var item in ViewBag.Districts)
                                        {
                                            <option value="@item.DistrictId">@item.DistrictName</option>
                                        }
                                    </select>

                                </div>
                               
                            </div>
                        </div>
</div>



<script>
 var $remove = $('<input type="button" value="Remove" class="remove btn btn-danger" />');

        $(".addspousBtn").click(function (e) {
            e.preventDefault();

            debugger;

            var html = '<hr/><div class="form-row mt-1 SpousDiv"> <div class="col-6"> <div class="form-group col-12 m-0"> <label for="Username" class="col-form-label s-12"><i class="icon-user mr-2"></i>Name</label> <input placeholder="Enter Name" class="form-control r-0 light s-12 SpousName" type="text" required> </div><div class="form-group col-12 m-0"> <label for="RoleId" class="col-form-label s-12"><i class="icon-address-card mr-2"></i>Home District</label><select class="custom-select select2 select2-hidden-accessible HomeDistrict" required="" tabindex="-1" aria-hidden="true"><option value="">-Select Home District-</option>@foreach (var item in ViewBag.Districts){<option value="@item.DistrictId">@item.DistrictName</option>}</select></div></div></div>';


            var $lastDiv = $(".card-body").find(".SpousDiv").last();
            $(html).insertAfter($lastDiv);

        })
</script>

and the js code to append new div

Answer 1

You can use

@Html.DropDownList("Districts", null, "-Select Home District-", new {@class="custom-select select2 select2-hidden-accessible HomeDistrict" })

and you must add $(".select2").select2(); to click js for the new appended element

<div class=" card-body">
  <button class="btn-success text-right addspousBtn">
   <i class="icon icon-plus-square"> </i>
   Add New Spous
 </button>
  <div class="form-row mt-1 SpousDiv">
    <div class="col-6">
      <div class="form-group col-12 m-0">
        <label for="Username" class="col-form-label s-12">
          <i class="icon-user mr-2"></i>
          Name
        </label>
        <input placeholder="Enter Name" class="form-control r-0 light s-12 SpousName" type="text" required>
      </div>
      <div class="form-group col-12 m-0">
        <label for="District" class="col-form-label s-12">
          <i class="icon-address-card mr-2"></i>
          Home District
        </label>
        @Html.DropDownList("Districts", null, "-Select Home District-", new {@class="custom-select select2 select2-hidden-accessible HomeDistrict"
        })

      </div>

    </div>
  </div>
</div>

<script>
  var $remove = $('<input type="button" value="Remove" class="remove btn btn-danger" />');

  $(".addspousBtn").click(function(e) {
    e.preventDefault();

    debugger;

    var html = '<hr/><div class="form-row mt-1 SpousDiv"> <div class="col-6"> <div class="form-group col-12 m-0"> <label for="Username" class="col-form-label s-12"><i class="icon-user mr-2"></i>Name</label> <input placeholder="Enter Name" class="form-control r-0 light s-12 SpousName" type="text" required> </div><div class="form-group col-12 m-0"> <label for="RoleId" class="col-form-label s-12"><i class="icon-address-card mr-2"></i>Home District</label>@Html.DropDownList("Districts", null, "-Select Home District-", new {@class="custom-select select2 select2-hidden-accessible HomeDistrict" })</div></div></div>';


    var $lastDiv = $(".card-body").find(".SpousDiv").last();
    $(html).insertAfter($lastDiv);
    $(".select2").select2();
  })
</script>