JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container one">
<textarea class="add-y-comment" name="comment" id="ctextarea453" data-id="453" placeholder="First Text area"></textarea>

<div class="stiemo"><img src="http://img1.wikia.nocookie.net/__cb20140214223249/clubpenguin/images/e/e1/CPNext_Emoticon_-_Winking_Face.png" class="sm-sticker" sticker="(w1)"> click for first textarea</div>
</div>
   
    
    
<div class="container two">
<textarea class="add-y-comment" name="comment" id="ctextarea453" data-id="453" placeholder="Second Text area"></textarea>

<div class="stiemo"><img src="http://img1.wikia.nocookie.net/__cb20140214223249/clubpenguin/images/e/e1/CPNext_Emoticon_-_Winking_Face.png" class="sm-sticker" sticker="(w1)"> click for second textarea</div>
</div>
    
    
    
<div class="container tree">
<textarea class="add-y-comment" name="comment" id="ctextarea453" data-id="453"  placeholder="Third Text area"></textarea>

<div class="stiemo"><img src="http://img1.wikia.nocookie.net/__cb20140214223249/clubpenguin/images/e/e1/CPNext_Emoticon_-_Winking_Face.png" class="sm-sticker" sticker="(w1)"> click for third textarea</div>
</div>

CSS

.container {
   width:300px;
    height:150px;
    margin-right:5px;
    float:left;
}
.stiemo img {
    width:30px;
    height:30px;
}
.one {
    background-color:red;
}
.two {
    background-color:blue;
}
.tree {
    background-color:green;
}
textarea {
    width:230px;
}

JavaScript

$('body').on('click', '.sm-sticker', function(event) {
    event.preventDefault();
	    var id = $(this).attr('id');
		var sticker = $(this).attr('sticker');
		var msg = jQuery.trim($(this).parent('.stiemo').prev('.add-y-comment').val());
		
		if(msg == ''){
		   var sp = '';
		} else {
		   var sp = ' ';
	    }
		$(this).parent('.stiemo').prev('.add-y-comment').val(jQuery.trim(msg + sp + sticker + sp));
	});