JSFiddle - React, Tailwind, and code Playground

HTML

<div id="recommendTextArea" contenteditable >

</div>
<ul>
    <li class="display_box" title="TEST"> display_box </li>
</ul>

CSS

#recommendTextArea {
    background-color: gainsboro;
}

JavaScript

$(".display_box").live("mousedown",function() 
    {
        selRange = saveSelection();
        var startOffset = selRange.startOffset;
        var endOffset = selRange.endOffset;
        var username = $(this).attr('title');
        var content = $("#recommendTextArea").html();
        var E ="<span contenteditable='false'>"+ username + "</span> ";
        content += E;
        $("#recommendTextArea").html(content).focus();
        selRange.setStart($("#recommendTextArea")[0].childNodes[0], startOffset);
        selRange.setEnd($("#recommendTextArea")[0].childNodes[0], endOffset);
        restoreSelection(selRange);
        event.preventDefault();
    });

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}