JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toolbar">
    <input type="button" value="Button 1" id="button1" />
    <input type="button" value="Button 2" id="button2" />
</div>
<textarea id="text1"></textarea>

JavaScript

$.fn.extend({
    insertAtCaret: function(myValue) {
        this1 = $(this).get(0);
        if (document.selection) {
            this1.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            this1.focus();
        }
        else if (this1.selectionStart || this1.selectionStart == '0') {
            var startPos = this1.selectionStart;
            var endPos = this1.selectionEnd;
            var scrollTop = this1.scrollTop;
            this1.value = this1.value.substring(0, startPos) + myValue + this1.value.substring(endPos, this1.value.length);
            this1.focus();
            this1.selectionStart = startPos + myValue.length;
            this1.selectionEnd = startPos + myValue.length;
            this1.scrollTop = scrollTop;
        } else {
            this1.value += myValue + myValue;
            this1.focus(this1.value.length - 1);
            
        }
    }
});

$('#button1').click(function() {
    $('#text1').insertAtCaret('<br></br>');
});
$('#button2').click(function() {
    $('#text1').insertAtCaret('text 2');
});