How to keep on add text boxes using mvc5

See more:

Javascript

MVC5

Hi,
I have a create view. in that view header fields are there. i.e,.
SLNO Name DOB Relationship. and four text boxes for 4 headers, if I clicked on "Add" only 4 text boxes should repeat. So for me 4 text boxes with header fields are repeating. I want to repeat only text boxes if I click on Add option. below is my code.

Please help me.

Thanks in Advance

What I have tried:


<input type="submit" id="btnSubmit" />

<!--below Script-->

<script type="text/javascript">

$(function () {

$("#addRow").click(function (e) {
e.preventDefault();
var template = $("#items").find(".itemRow").first();
var newRow = template.clone();
newRow.find("input.formfield").val("");
$("#items").append(newRow);

});

$("#btnSubmit").click(function (e) {
e.preventDefault();
var _this = $(this);
var url =_this.closest("form").attr("action");

var rows = [];
var items = $(".itemRow");

$.each(items, function (i, item) {
var fSLNO = $(item).find("input[name='SLNo']").val();
var fName = $(item).find("input[name='Name']").val();
var familyDOB = $(item).find("input[name='DOB']").val();
var fRelationship = $(item).find("input[name='Relationship']").val();

var row = { fSLNO: SLNo, fName: Name, familyDOB: DOB, fRelationship: Relationship };
rows.push(row);
});

//Let's post to server
$.ajax({
type:"POST",
url: url,
data: JSON.stringify(rows),
contentType: "application/json"
})
.done(function (result) {
//do something with the result
})

});
});
</script>