JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<div class="container one">
    <div class="comments-area" id="commentload47">comments will be come here</div>
    <div class="user-post" id="postbody47">
        <textarea class="sendcomment" name="comment" id="commentid47" data-msgid="47"></textarea>
        <div class="stiemo">
            <img src="http://d.lanrentuku.com/down/png/1009/networking/emoticon_inlove.png" class="sm-sticker emo" sticker="(w1)">click smiley to send (w1)</div>
    </div>
</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

$('.sendcomment').bind('keydown', function (e) {
    if (e.keyCode == 13) {
        var ID = $(this).attr("data-msgid");
        var comment = $(this).val();

        if ($.trim(comment).length == 0) {
            $("#commentload" + ID).text("Plese write your comment!");
        } else {
            $("#commentload" + ID).text(comment);
            $("#commentid" + ID).val('').css("height", "35px").focus();
        }
    }
});
/**/
$(document).ready(function () {
    $('body').on("click", '.emo', function () {

        var ID = $(this).attr("data-msgid");
        var comment = $(this).val();

        if ($.trim(comment).length == 0) {
            $("#commentload" + ID).text("nothing!");
        } else {
            $("#commentload" + ID).text(comment);
            $("#commentid" + ID).val('').css("height", "35px").focus();
        }

    });
});
$('body').on('click', '.sm-sticker', function (event) {
    event.preventDefault();
    var theComment = $(this).parents('.container').find('.sendcomment');
    var id = $(this).attr('id');
    var sticker = $(this).attr('sticker');
    var msg = jQuery.trim(theComment.val());

    if (msg == '') {
        var sp = '';
    } else {
        var sp = ' ';
    }

    theComment.val(jQuery.trim(msg + sp + sticker + sp));
    var e = $.Event("keydown");
    e.keyCode = 13; // # Some key code value
    $('.sendcomment').trigger(e);
});