JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <textarea id="txt">This is a text</textarea>
        <input type="button" id="btn" value="Insert XXX in cursor" />
    </body>
</html>

JavaScript

/*Jquery code*/
$(document).ready(function(){
    $("#btn").click(function(){
       $("#txt").insertAtCaret("XXX"); //This calls the plugin
    });
});


/*Plugin definition*/
jQuery.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      this.focus();
      sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  })
}
});