how can add dynamically file in mvc using ajax jquery

Question

how can add dynamically files(upload box) in mvc using ajax jquery

 

here my view:

<div class="form-group fieldGroup">
<div class="input-group">
<table id="customers">
<tr>
<th>
<select id="ddldoc">
<option value="1">Adhar</option>
<option value="2">CC</option>
<option value="3">TC</option>
</select>
</th>
<th><input type="file" name="UploadFile" id="txtUploadFile" class="makethispretty" multiple /></th>
<th>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
</div>
</th>
</tr>
</table>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" id="btn-primary" value="SUBMIT" />
</form>

here JS(jquery)

$(document).ready(function () {
var maxGroup = 10;
$(".addMore").click(function () {
if ($('body').find('.fieldGroup').length < maxGroup) {
var fieldHTML = '<div class="form-group fieldGroup">' + $('.input-group').html() + '</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
} else {
alert('Maximum ' + maxGroup + ' groups are allowed.');
}
});
$("body").on("click", ".remove", function () {
$(this).parents(".fieldGroup").remove();
});
$('.makethispretty').on('change', function (e) {
var files = e.target.files;
if (files.length > 0) {
if (window.FormData !== undefined) {
var data = new FormData();
for (var x = 0; x < files.length; x++) {
data.append("file" + x, files[x]);
}
}
};