JSFiddle - React, Tailwind, and code Playground

HTML

<textarea name="insert" id="insert">Hello there my good friend....</textarea>
<div id="myvalue">how do you do</div>

JavaScript

function insertAt (myField, myValue, startSel, endSel) {
    if (startSel || startSel == '0') {
        var startPos = startSel;

        var endPos = endSel;

        myField.val(myField.val().substring(0, startPos)+ myValue+ myField.val().substring(endPos, myField.val().length));

  } 
  else {

      myField.val() += myValue;

  }
}

// calling the function
var targetBox = $('textarea#insert'),
    startSel, 
    endSel;
targetBox.bind('focusout', function() {
    //insertAtCursor(this, 'how do you do');
    startSel = this.selectionStart;
    endSel = this.selectionEnd;
});
    
    $("#myvalue").click(function() {
        var myValue = $(this).text();
        insertAt(targetBox, myValue, startSel, endSel);
        
    });