Question: I am trying to append a number of dropdowns on Button click.These dropdowns should have proper indexing in its 'name' attribute. 

This is the dropdown:-

```
<div id="dropdownDiv" style="display:none">
    <div class="form-group">
        @Html.LabelFor(model => model.PropertyInvestors, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.PropertyInvestors, (IEnumerable<SelectListItem>)@ViewBag.Investors, "Select Investor", htmlAttributes: new { @id = "dropdown",@name= "[#].PropertyInvestors", @class = "form-control",@onChange="dropdownChange()" })
            @Html.ValidationMessageFor(model => model.PropertyInvestors, "", new { @class = "text-danger" })
        </div>
    </div>
</div> 

```

This is the JS code that I am trying in order to clone the dropdown and replace its name attribute with desired indexing.

```
$('#addDropdown').click(function () {
    var index = (new Date()).getTime();
    var clone1 = $('#dropdownDiv').clone();        
    clone1.html($(clone1).html().replace(/\[#\]/g, '[' + index + ']'));
    $('#field1').append(clone1.html());
});

```

Problem:- The dropdowns are being appended as they are clicked but their name attributes are same for all of the dropdowns produced due to which I cant postback the data to the controller.

Answer: 
While this problem can be solved by using dummy code and manipulating the Index no. by using JS, a good method would be to use `Html.BeginCollectionItem()` by creating a partial view for the dropdown and later making an ajax call to append the partial view to the main view. Refer to the answer [HERE](https://stackoverflow.com/questions/40539321/a-partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892)
You can replace ID and Name as follows:

```
$('#addDropdown').click(function () {
    var index = (new Date()).getTime();
    var clone1 = $('#dropdownDiv').clone();        
    $(clone1).find('select').attr("id", index);      
    $(clone1).find('select').attr("name", "PropertyInvestor[" + index +"]");  
    $('#field1').append(clone1.html());
});

```

JSFiddler: <https://jsfiddle.net/qj24yybe/6/>