JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<div id="write-mail">
			<div style="position: relative;">
      <div id="new-mail-content" contenteditable="true">
          <div>How to return the caret where it was in the sentence after clicking the buttons?</div>
          <div>Maybe prevent the caret from being removed after clicking the buttons?</div>
          <div>I know I can store the current selection by using window.getSelection(). If I would be able to reactivate this selection, that would be great!</div>
      </div>
				<div id="emotepicker">
					<button><span>&#10004;</span></button>
					<button><span>&#10031;</span></button>
					<button><span>&#10008;</span></button>
				</div>
			</div>
				<button class="add-icon">Add Icon</button>	
			</div>

CSS

#new-mail-content{
  background-color: white;
  min-height: 5em;
}
#write-mail button{
  height: 30px;
}
#emotepicker{
  display: none; 
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0,0,0,0.1);
  text-align: center;
}
div{
  padding: 2px;
}

JavaScript

$(".add-icon").click(function(){
	$("#emotepicker").toggle();
});