JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<table id="customFields" class="table table-bordered table-hover additionalMargin alignment">
	<thead>
	<tr>
		<th colspan="2"></th>
		<th>Some Title</th>
	</tr>
	</thead>
	<tbody>
		<tr>
			<td><label class="subjectline" for="User1">User NOC M1</label></td>
			<td id="slLabel">SL_A</td>
			<td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td>
			<td><a class="addCF" href="javascript:void(0);">+ additional user</a></td>
		</tr> 
	</tbody>
</table>

JavaScript

$(function() {
    alp = "A";
    $(".addCF").click(function(){
    alp = (alp.substring(0,alp.length-1)+String.fromCharCode(alp.charCodeAt(alp.length-1)+1));
    $("#customFields").append('<tr><td></td><td>SL_'+alp+'</td> <td><input type="text" name="slOptions[User][NOC M1'+alp+']" class="form-control" id="User1"></td> <td> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
    });
    $("#customFields").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});