JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="input" />
<input type="button" class="btn" value="A" />
<input type="button" class="btn" value="S" />
<input type="button" class="btn" value="D" />
<input type="button" class="btn" value="F" />

JavaScript

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}


$('.btn').click(function(){
   var $this = $(this);
   var caret = document.getElementById('input').selectionStart;
   var caretEnd = document.getElementById('input').selectionEnd;
   var character = $this.val(); 
   var textAreaStr = $('#input').val();
   $("#input").val(textAreaStr.substring(0, caret) + character + textAreaStr.substring(caretEnd) );
    setCaretPosition('input', caret+1);
});