JSFiddle - React, Tailwind, and code Playground

HTML

<script>
	function insertEmoticon(emoticon)  {
		$('textarea').val($('textarea').val() + ' ' + emoticon);
	};
</script>

<textarea placeholder="type message here or add some emojis"></textarea>
<div class="faces">
  <a onClick="insertEmoticon('\ud83d\ude0a');"><img src="//cdn.jsdelivr.net/emojione/assets/svg/263a.svg" /></a>
  <a onClick="insertEmoticon('\ud83d\ude00');"><img src="//cdn.jsdelivr.net/emojione/assets/svg/1f60a.svg" /></a>
  <a onClick="insertEmoticon('\ud83d\ude1f');"><img src="//cdn.jsdelivr.net/emojione/assets/svg/2639.svg" /></a>
</div>
<div style="clear:both"></div>
Value .val()
<div id="val"></div>
Html .html()
<div id="html"></div>

CSS

textarea{
  width:100%;
  height:2em;
  background:#FFF;
  line-height:1em;
  font-size:0.8em;
}
.faces{
  margin-bottom:2em;
}
.faces{
  width:100%;
  height:auto;
}
.faces img{
  float:left;
  width:8vw;
  margin:1vw;
}
#val, #html{
  border:solid 1px red;
  margin-bottom:2em;
  padding:1em;
}

JavaScript

$(function () {
		 $('textarea').bind('change keyup input', function () {
  	$('#val').html($(this).val());
    $('#html').html($(this).html());
  });
});