<div class="card applicant-model">
<div class="applicant-item">
<input type="hidden" name="ApplicantsModel.Applicants.Index" class="indexVariable" value="0" />
<div>
<input name="ApplicantsModel.Applicants[0].FirstName" id="ApplicantsModel.Applicants[0].FirstName" type="text" />
</div>
</div>
</div>
<button id="add" type="button" href="#">Add</button>
<script>
$(function() {
$('#add').click(function() {
var item = $('.applicant-model .applicant-item:last-child .indexVariable');
var highestIndex = parseInt(item.val()) + 1;
console.log(item);
console.log(highestIndex);
var template =
'<div class="applicant-item">' +
'<input type="hidden" name="ApplicantsModel.Applicants.Index" id="ApplicantsModel.Applicants.Index" class="indexVariable" value="' + highestIndex + '" />' +
'<div>' +
'<input name="ApplicantsModel.Applicants[' + highestIndex + '].FirstName" id="ApplicantsModel.Applicants[' + highestIndex + '].FirstName" type="text" />' +
'</div>' +
'</div>';
$('.applicant-model').append(template);
});
})
</script>