JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="description" name="description"/>

<div class="btn-group">
					<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
					<img alt="" src="http://www.tipocode.com/images/smilies/icon_smile.gif"> <span class="caret"></span>
					</button>
					<ul role="menu" class="dropdown-menu"><li><a href="#"><table><tbody><tr>
					<td><img alt=":smile:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_smile.gif">&nbsp;</td><td><img alt=":sad:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_sad.gif">&nbsp;</td><td><img alt=":arrow:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_arrow.gif">&nbsp;</td><td><img alt=":cool:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_cool.gif">&nbsp;</td><td><img alt=":cry:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_cry.gif">&nbsp;</td></tr><tr><td><img alt=":grin:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_grin.gif">&nbsp;</td><td><img alt=":confused:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_confused.gif">&nbsp;</td><td><img alt=":bigeyes:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_bigeyes.gif">&nbsp;</td><td><img alt=":evil:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_evil.gif">&nbsp;</td><td><img alt=":exclaim:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_exclaim.gif">&nbsp;</td></tr><tr><td><img alt=":geek:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_geek.gif">&nbsp;</td><td><img alt=":idea:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_idea.gif">&nbsp;</td><td><img alt=":lol:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_lol.gif">&nbsp;</td><td><img alt=":mad:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_mad.gif">&nbsp;</td><td><img alt=":green:" id="addSmiley"...

CSS

ul li {
    list-style-type: none;    
}

JavaScript

function textWithSmilies(text) { // Function that change the textarea content in a string including smilies icons
	// Create 2 array: 1 containing the smiley BBCode, the second containing a part of their file name
	var findSmiliesShortcuts = [/:smile:/g, /:sad:/g, /:arrow:/g, /:cool:/g, /:cry:/g, /:grin:/g, /:confused:/g, /:bigeyes:/g, /:evil:/g, /:exclaim:/g, /:geek:/g, /:idea:/g, /:lol:/g, /:mad:/g, /:green:/g, /:neutral:/g, /:question:/g, /:happy:/g, /:redface:/g, /:rolleyes:/g, /:surprised:/g, /:devil:/g, /:wink:/g];
	var replaceSmiliesImg = ['smile', 'sad', 'arrow', 'cool', 'cry', 'grin', 'confused', 'bigeyes', 'evil', 'exclaim', 'geek', 'idea', 'lol', 'mad', 'green', 'neutral', 'question', 'happy', 'redface', 'rolleyes', 'surprised', 'devil', 'wink'];
	
	for (i = 0; i < findSmiliesShortcuts.length; i++) {
		text = text.replace(findSmiliesShortcuts[i], '<img src="http://www.tipocode.com/images/smilies/icon_' + replaceSmiliesImg[i] + '.gif" alt="" />'); // Replace all smilies BBCode by their image
	}
	text = text.replace(/\n/g, '<br />'); // Replace new lines by <br />
	return text;
}

$(function() {
	// This function allow to insert text or smiley in the textarea where the cursor is
	jQuery.fn.extend({
	insertAtCaret: function(myValue) {
	  return this.each(function(i) {
		if (document.selection) {
		  //For browsers like Internet Explorer
		  this.focus();
		  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 +=...