Dynamic, multiple dropdowns on button click with jquery

See more:

C#

jQuery

MVC5

.NET4.6

I have already a drop-down.on every one click button, it appends another dropdown.but in the table it shows only one dropdown selected value. Instead it should show all of dropdowns selected value.

What I have tried:

this is jquery

$(document).ready(function () {
        $("#btnAdd").click(function () {
         
            var select = $('#DROP').clone().attr('id', $('#DROP').attr('id')).attr('name', $('#DROP').attr('name'));
            $("z").append(select);
        });
    });

this is ajax form code

@using (Ajax.BeginForm("Create", "Home", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "OnSuccess", OnFailure = "OnFailure" }, new { @id = "formid" }))
           {
           <div class="tab-content">

               <div class="tab-pane fade active in cont" id="tab_5_1">
                   <div class="modal-body">

                       <div class="row">
                           <div class="col-md-6">

                               <div class="roe">
                                   @Html.Label("Name")

                               </div>
                               @Html.TextBoxFor(m => m.Name, new { @class = "text-danger form-control", @id = "Name" })

                               @Html.ValidationMessageFor(m => m.Name, null, new { @class = "text-danger" })
                               <br />
                               <div class="roe">
                                   @Html.Label("Address")
                               </div>
                               <br />

                               @Html.TextBoxFor(m => m.Address, new { @class = "text-danger form-control", @id = "Address" })
                               @Html.ValidationMessageFor(m => m.Address, null, new { @class = "text-danger" })
                               <br />




                           </div>


                       </div>


                   </div>

                   <div class="modal-footer">

                       <button href="#tab_5_2" id="changetabbutton" type="button" class="nexttab tab-pane active btn green enableOnInput    " target="_blank">
                           Next
                       </button>


                   </div>
               </div>
               @*</div>*@

               <div class="tab-pane fade cont " id="tab_5_2">
                   <div class="modal-body">

                       <div class="row">
                           <div class="col-md-6">

                               <input type="button" id="btnAdd" class="btn green" value="Add DropDownList" />
                               <div class="divcls">

                                   <div class="roe">
                                       @Html.Label("Town")
                                   </div>
                                   <br />
                                   @Html.TextBoxFor(m => m.Town, new { @class = "text-danger form-control", @id = "Town" })
                                   @Html.ValidationMessageFor(m => m.Town, null, new { @class = "text-danger" })
                                   <br />
                               </div>
                               <z>
                                   <div id="DROP">

                                       @Html.DropDownListFor(m => m.saved, new SelectList(ViewBag.emp), "Select company", new { @class = "form-control" })
                                   </div>
                               </z>
                               @*<z>
                                   <div id="DROP">

                                       @Html.DropDownListFor(m => m.Name, new SelectList(ViewBag.emp), "Select company", new { @class = "form-control" })
                                   </div>
                               </z>*@
                           </div>




                       </div>
                       <div class="modal-footer">

                           <button type="button" data-dismiss="modal" class="btn default">Close</button>
                           <button type="submit" id="close" class="btn green" value="Submit">Save changes</button>
                       </div>
                   </div>

               </div>




           </div>
       }

this is the controller

[HttpGet]
       public ActionResult Create()
       {
           var li = db.tbl_Compnay.Where(p => p.Name != null).Select(p => p.Name).ToList();

           ViewBag.emp = li;
           return View();
       }


       [HttpPost]
       public ActionResult Create(company companyData)
       {
           dynamic showMessageString = string.Empty;
           try
           {

               tbl_Compnay a = new tbl_Compnay();
               a.Name = companyData.Name;
               a.Town = companyData.Town;
               a.Address = companyData.Address;

               a.saved= companyData.saved;
               db.tbl_Compnay.Add(a);
               db.SaveChanges();

           }
           catch (Exception ex)
           {
               var errorMsg = ex.Message.ToString();
               showMessageString = new
               {
                   param1 = 404,
                   param2 = "Exception occured while converting user date"
               };

           }
           return Json("OnSuccess", JsonRequestBehavior.AllowGet);
       }

       public JsonResult IsNameUnique(company Company)
     {
           return IsExist(Company.Name)
               ? Json(true, JsonRequestBehavior.AllowGet)
               : Json(false, JsonRequestBehavior.AllowGet);
       }

       public bool IsExist(string Name )
       {
           var Company = db.tbl_Compnay.Where(x => x.Name == Name).Count();


           if (Company > 0 )
           {
               return false;
           }

           return true;

       }