JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="description" name="description"></textarea>   

<div id="emoticons">
    <a href="#" title=":)"><img alt=":)" border="0" src="http://markitup.jaysalvat.com/examples/markitup/sets/bbcode/images/emoticon-happy.png" /></a>
    <a href="#" title=":("><img alt=":(" border="0" src="http://markitup.jaysalvat.com/examples/markitup/sets/bbcode/images/emoticon-unhappy.png" /></a>
    <a href="#" title=":o"><img alt=":o" border="0" src="http://markitup.jaysalvat.com/examples/markitup/sets/bbcode/images/emoticon-surprised.png" /></a>
</div>

JavaScript

$('#emoticons a').click(function () {
   var smiley = $(this).attr('title');
   ins2pos(smiley, 'description');
});

function ins2pos(str, id) {
   var TextArea = document.getElementById(id);
   var val = TextArea.value;
   var before = val.substring(0, TextArea.selectionStart);
   var after = val.substring(TextArea.selectionEnd, val.length);
   
   TextArea.value = before + str + after;
   setCursor(TextArea, before.length + str.length);
   
}

function setCursor(elem, pos) {
   if (elem.setSelectionRange) {
      elem.focus();
      elem.setSelectionRange(pos, pos);
   } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
   }
}