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

// Store the possible letters
var possibleLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Store the current letter
var currentLetter = 'A';

$(function() {
    $(".addCF").click(function(){
    		// Resolve the next letter to add
        var nextIndex = possibleLetters.indexOf(currentLetter) + 1;
        currentLetter = possibleLetters[nextIndex];
        $("#customFields").append('<tr><td></td><td>SL_' + currentLetter + '</td> <td><input type="text" name="slOptions[User][NOC M1' + currentLetter + ']" 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();
    });
});