JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>

<div>
   <img src='https://image.flaticon.com/icons/svg/134/134917.svg' width='30px' height='30px' class='cmticon' id='1'>
   <img src='http://www.clker.com/cliparts/8/3/3/4/1195445190322000997molumen_red_round_error_warning_icon.svg.med.png' width='10px' height='10px' align='top' class='close' >
   <div>
     <textarea  contenteditable="true" style='height:50px;margin:3px;display:none' class='cmtbox_1'></textarea>
   </div>
 </div>
<div>
   <img src='https://image.flaticon.com/icons/svg/134/134917.svg' width='30px' height='30px' class='cmticon' id='2'>
   <img src='http://www.clker.com/cliparts/8/3/3/4/1195445190322000997molumen_red_round_error_warning_icon.svg.med.png' width='10px' height='10px' align='top' class='close' >
   <div>
     <textarea  contenteditable="true" style='height:50px;margin:3px;display:none' class='cmtbox_2'></textarea>
   </div>
 </div>
 <div>
   <img src='https://image.flaticon.com/icons/svg/134/134917.svg' width='30px' height='30px' class='cmticon' id='3'>
   <img src='http://www.clker.com/cliparts/8/3/3/4/1195445190322000997molumen_red_round_error_warning_icon.svg.med.png' width='10px' height='10px' align='top' class='close' >
   <div>
     <textarea  contenteditable="true" style='height:50px;margin:3px;display:none' class='cmtbox_3'></textarea>
   </div>
 </div>

JavaScript

$('.cmticon').on('click',function(){
	$(this).children('div.textarea').toggle(1000);
  alert($(this).children('div.textarea').text());
  console.log($(this).children('div.textarea'));
})
$('.close').on('click',function(){
	$(this).parent().remove();
});