JSFiddle - React, Tailwind, and code Playground

HTML

<div id="text_wrapper">
    <div id="text" contentEditable="true" hidefocus="true"></div>
</div>
<div id="text_wrapper">
    <div id="text1" contentEditable="true" hidefocus="true"></div>
</div>
<div id="text_wrapper">
    <div id="text2" contentEditable="true" hidefocus="true"></div>
</div>

<span id="button">Add Emoji</span>

CSS

body {
  font-family: Helvetica, sans-serif;
  color: #333;
}
#text_wrapper {
  margin: 40px;
  border: 1px solid #ccc;
}
#text,#text1,#text2{  
  outline: none;
  margin: 10px;
  min-height:100px;
}
#text img {
  width: 20px;
}

#button {
  color: #bbb;
  margin-left: 40px;
}

JavaScript

$("#button").click(function() {
  $("#text").append('<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>');
});