JSFiddle - React, Tailwind, and code Playground

HTML

<input id="demooutput" type="text" size="15" value="My Text" name="demo" />
    <span class="demooutput">
        <a href="#" class="button orange">A</a>
        <a href="#" class="button orange">B</a>
        <a href="#" class="button orange">C</a>
        <a href="#" class="button orange">D</a>
        <a href="#" class="button orange">E</a>        
    </span>

CSS

select,input{margin:10px}

a{text-decoration: none;}
.button {
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3) inset;
    color: #292929;
    cursor: pointer;
    font-family: 'Open Sans',sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    height: 28px;
    max-height: 40px !important;
    padding: 4px 14px 5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.button.orange {
    background:#E3B822;
    border: 1px solid #C79F16;
    padding: 5px 10px !important;
}

JavaScript

jQuery.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      var sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      //For browsers like Firefox and Webkit based
      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();
    }
  });
}
});


$('.demooutput a').click(function(){
    var txtToAdd = ' ' + $(this).html() + ' ';
    $('#demooutput').insertAtCaret(txtToAdd);
    return false;
});