JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id='myTextArea' rows='5'>hello world. I've been waiting for the chance to see your face.</textarea>
<button id='btnBold' value='Bold'>Make Something Bold </button>

CSS

.bold {
    font-weight: bold;
}

JavaScript

function ChangeText(elementID, openTag, closeTag) {
    var textArea = $('#' + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var selectedText = textArea.val().substring(start, end);
    var replacement = openTag + selectedText + closeTag;
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}

$('#btnBold').click(function() {
    ChangeText("myTextArea", "<strong>", "</strong>");
});