Hi I want to have add more button on my page which can replicate the existing form as many times as i want as i click add more button just like what linkedin is doing for education and experience section.
I want dynamic controls with complete styling
<div class="form-horizontal" style=" border: 1px solid #c6c7cc;
border-radius: 5px;
font: 14px/1.4 " helvetica="" neue",="" helvetica,="" arial,="" sans-serif;="" overflow:="" hidden;="" width:="" 840px;="" padding:="" 10px;="" background-color:="" white;"="">
<div class="row">
<div class="col-lg-12">
<h4 style="background-color:cornflowerblue; padding:5px;">Educational information</h4>
</div>
</div>
<div style="margin:10px;">
<div class="row">
<div class="col">
@Html.EditorFor(model => model.educations.Degree_Title, new { htmlAttributes = new { placeholder = "Enter Degree Title ", @class = "form-control" } })
@Html.ValidationMessageFor(model => model.educations.Degree_Title, "", new { @class = "text-danger" })
</div>
<div class="col">
@Html.EditorFor(model => model.educations.School, new { htmlAttributes = new { placeholder = "Enter School Name", @class = "form-control" } })
@Html.ValidationMessageFor(model => model.educations.School, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div style="margin:10px;">
<div class="row">
<div class="col">
@Html.EditorFor(model => model.educations.Field_of_study, new { htmlAttributes = new { placeholder = "Enter Field of Study", @class = "form-control" } })
@Html.ValidationMessageFor(model => model.educations.Field_of_study, "", new { @class = "text-danger" })
</div>
<div class="col">
@Html.EditorFor(model => model.educations.Description, new { htmlAttributes = new { placeholder = "Enter Course/Degree Detail", @class = "form-control" } })
@Html.ValidationMessageFor(model => model.educations.Description, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div style="margin:10px;">
<div class="row">
<div class="col">
@Html.DropDownListFor(model=>model.educations.Grade, new List<SelectListItem>
{
new SelectListItem{ Text="Select Grade", Value = "1" },
new SelectListItem{ Text="A", Value = "2" },
new SelectListItem{ Text="B", Value = "3" },
new SelectListItem{ Text="C", Value = "4" },
new SelectListItem{ Text="D", Value = "5" },
new SelectListItem{ Text="E", Value = "6" },
}, new { @class = "btn form-text" })
@Html.ValidationMessageFor(model => model.educations.Grade, "", new { @class = "text-danger" })
<div class="col-sm-4">
@Html.EditorFor(model => model.educations.Start_Year, new { htmlAttributes = new { placeholder = "Enter Start Date", @class = "form-control" } })
@Html.ValidationMessageFor(model => model.educations.Start_Year, "", new { @class = "text-danger" })
</div>
<div class="col-sm-4">
@Html.EditorFor(model => model.educations.End_Year, new { htmlAttributes = new { placeholder = "Enter End Date", @class = "form-control" } })
@Html.ValidationMessageFor(model => model.educations.End_Year, "", new { @class = "text-danger" })
</div>
<div class="col">
<label for="switch17">Active</label>
@Html.CheckBoxFor(m => m.educations.isFinalDegree, new { id = "switch17", name = "switch17", @class = "css-checkbox9 all_check" })
</div>
</div>
</div>
</div>
</div>
it should generate the above complete code as many times as i click the button