Hi Shud,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
View
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('#btnAddMore').on('click', function () {
var html = $('#injectionDiv').parent().html();
$('#dvContent').append(html);
});
});
</script>
<div class="col-md-5">
<div class="box-body" id="injectionDiv" align="left" style="background-color: antiquewhite;
padding-bottom: 33px; margin-left: -20px; box-shadow: 2px 2px lightgrey;">
<label class="col-sm-12">
Injections</label>
<br />
<hr style="border-top: 1px solid white; margin-left: 5px; margin-right: 5px" />
<div class="col-md-4" align="center">
<div class="form-group">
<label class="col-sm-12">
Type</label>
<div class="col-sm-12">
<%:Html.DropDownList("nvc_Injection_Type", new List<SelectListItem> {
new SelectListItem{ Text="A", Value = "P" },
new SelectListItem{ Text="B", Value = "A" },
new SelectListItem{ Text="C", Value = "L" }, }
, "--Type--", new {@class="form-control",@id="selectInjectionType"})%>
</div>
</div>
</div>
<div class="col-md-3" align="center">
<div class="form-group">
<label class="col-sm-12">
Brand</label>
<div class="row">
<div class="col-sm-12">
<%:Html.Editor("nvc_Injection_Brand", new { htmlAttributes = new { @class = "form-control", @placeholder = "Brand...", @id = "InjectionBrand" } }) %>
</div>
</div>
</div>
</div>
<div class="col-md-3" align="center">
<div class="form-group">
<label class="col-sm-12">
Unit</label>
<div class="col-sm-12">
<%:Html.Editor("nvc_Injection_Unit", new { htmlAttributes = new { @class = "form-control", @type = "number", @placeholder = "Unit...", @id = "InjectionUnit" } }) %>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="col-sm-2" align="center">
<a class="repeat" href="javascript:;"><i class="fa fa-fw fa-plus-square" style="color: green">
</i></a>
</div>
<div class="col-sm-2" align="right">
<a class="repeat" href="javascript:;"><i class="fa fa-fw fa-minus-square" style="color: red">
</i></a>
</div>
</div>
</div>
</div>
</div>
<br /><br />
<input type="button" value="Add More" id="btnAddMore" />
<br /><br /><br /><br /><br /><br />
<div class="col-md-5">
<div id="dvContent">
</div>
</div>
Screenshot
