Adding drop down dynamically on add button click in MVC

See more:

MVC

jQuery-UI

I currently have following code in cshtml file

<div class="row" id="addtesting">
<div class="col-md-4">
<div class="form-group">
@Html.Label("Testing", htmlAttributes: new { @class = "control-label" })
@Html.DropDownListFor(x => x.TestingType, (List<SelectListItem>)ViewBag.TestingTypes, "", new { @class = "form-control", @id = "chooseTestingType" })
</div>
</div>
<div class="col-md-2">
<div class="form-group">
@Html.Label("Frequency", htmlAttributes: new { @class = "control-label" })
@Html.DropDownListFor(x => x.Frequency, (List<SelectListItem>)ViewBag.Frequency, "", new { @class = "form-control", @id = "chooseFrequency" })
</div>
</div>
<div class="col-md-2">
<div class="form-group" style="padding-top:20px;">
<span style="font-size:24px;" id="plusicon">+</span>
</div>
</div>
</div>

And i need a add a new row of 2 drop downs of Testing type and frequency and having there id's incremented  on clicking the "+" icon in JavaScript/jquery and then saving the data in database.

Is there any tutorial or code that could help me out.

What I have tried:

I have tried adding the new controls using the jquery but was not successful instead a code is getting added.
And i am having difficulty getting the values as it is generating same id values for the child text boxes.