JSFiddle - React, Tailwind, and code Playground

HTML

<label for="xxx">BBCode <input type="text" name="xxx" id="xxx" size="50" /></label>

<br/>
<br/>
Emoticons
<table id="emoticons" width="663">
    <tbody>
        <tr>
            <td><a href="#"><img src="http://i.imgur.com/F8k57.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/s9yJ6.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/sdJiU.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/lGvcb.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/fl2y6.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/OyckT.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/IY0hA.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/i8qLI.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/Sa2XO.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/5uSyL.gif" alt="" /></a></td>
        </tr>
        <tr>
            <td><a href="#"><img src="http://i.imgur.com/Q6Dhw.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/EnFOQ.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/IOIV3.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/LDgW9.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/woVfg.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/EV3TB.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/wBCFL.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/tibpa.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/Ehqfa.gif" alt="" /></a></td>
            <td><a href="#"><img src="http://i.imgur.com/vBo6c.gif" alt="" /></a></td>
        </tr>
    </tbody>
</table>
<br/>
<p>How to...

CSS

body {
    padding: 30px;
    min-width: 700px;
}
td {
    border: 1px solid #c9c9c9;
    text-align: center;
}

JavaScript

$(function(){
    $('#emoticons td > a').click(function(e){
        e.preventDefault();
        var src = $(this).children('img').prop('src'),
            xxx = $('#xxx');
        xxx.val('[img]'+ src +'[/img]');
        if (xxx.next().is('img')) {
            xxx.next().prop('src',src);
        }
        else {
            xxx.after('<img src="' + src + '" alt="" />')
        }
    });
});