JSFiddle - React, Tailwind, and code Playground

HTML

<a name="tag" data-toggle="tooltip" tag="<<SubmitterFirst>>" title="The first name of the employee submitting the nomination">&lt;&lt;SubmitterFirst&gt;&gt;</a>

<a name="tag" data-toggle="tooltip" tag="<<SubmitterLast>>" title="The last name of the employee submitting the nomination">&lt;&lt;SubmitterLast&gt;&gt;</a>
<br />
<textarea name="templateContent" id="templateContent" class="form-control" rows="12"></textarea>

JavaScript

$('[name=tag]').click(function(){
		    var caretPos = document.getElementById("templateContent").selectionStart,
				currentTemplate = $('#templateContent').val(),
				theTag = $(this).attr('tag');
			$("#templateContent").empty().val(currentTemplate.substring(0, caretPos) + theTag  + currentTemplate.substring(caretPos));
			$("#templateContent").focus();
		});