Adding a Dynamic form fields in MVC Asp.Net
<p>I'm trying to add and remove form fields in MVC Asp.Net.
I've followed <a href="http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery" rel="nofollow">this tutorial</a> of dynamic adding and removing form fields.</p>

<p>I'm having a problem only this part of code. In below code it only adds a textbox.</p>

<pre><code>if(x &lt; max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('&lt;div&gt;&lt;input type="text" name="mytext[]"/&gt;&lt;a href="#" class="remove_field"&gt;Remove&lt;/a&gt;&lt;/div&gt;'); //add input box
    }
});
</code></pre>

<p>but I want to add 2 dropdownlists and 1 textbox by using MVC helpers not html codes.</p>

<p>I've 2 dropdownlist, Sizes and Colors and 1 textbox for Quantity. Dropdownlists are populating values from DB.</p>

<pre><code>&lt;div class="form-group"&gt;
    &lt;div class="row"&gt;
        &lt;div class="input_fields_wrap"&gt;
            &lt;button class="add_field_button"&gt;Add More Fields&lt;/button&gt;
            &lt;div class="col-md-2"&gt;
                @Html.DropDownList("ProductSizeVariantId", null, "Size", new { @class = "control-label" })
            &lt;/div&gt;
            &lt;div class="col-md-2"&gt;
                @Html.DropDownList("ProductSizeVariantValueId", null, "Select Size", new { @class = "control-label" })
            &lt;/div&gt;
            &lt;div class="col-md-2"&gt;
                @Html.DropDownList("ProductColorVariantId", null, "Select Color", new { @class = "control-label" })
            &lt;/div&gt;
            &lt;div class="col-md-2"&gt;
                @Html.TextBoxFor(x =&gt; x.Stock, new { @placeholder = "Quantity", @class = "form-control" })
            &lt;/div&gt;
         &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>here is what i've tried</strong></p>

<pre><code>$(wrapper).append('&lt;div&gt;&lt;div class="col-md-2"&gt;@Html.DropDownList("ProductSizeVariantId", null, "Size", new { @class = "control-label" })&lt;/div&gt;&lt;div class="col-md-2"&gt;@Html.DropDownList("ProductSizeVariantValueId", null, "Select Size", new { @class = "control-label" })&lt;/div&gt;&lt;div class="col-md-2"&gt;@Html.DropDownList("ProductColorVariantId", null, "Select Color", new { @class = "control-label" })&lt;/div&gt;&lt;div class="col-md-2"&gt;@Html.TextBoxFor(x =&gt; x.Stock, new { @placeholder = "Quantity", @class = "form-control" })&lt;/div&gt;&lt;a href="#" class="remove_field"&gt;Remove&lt;/a&gt;&lt;/div&gt;'); //add input box
</code></pre>

<p>after adding above code, when I click AddMore button, it reloads the page.</p>