JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<button data-id="1">button 1</button>
<button data-id="2">button 2</button>
<button data-id="3">button 3</button>
<button>clear</button>
<div id="vingrad_garden"></div>

CSS

#vingrad_garden {
    border: 1px solid red;
    width: 80%;
    height: 150px;
    padding: 10px;
    margin: 20px auto;
}

JavaScript

$container = $('#vingrad_garden');
$('button').on('click', function(){
    var _id = $(this).data('id');
    if (_id) {
        var $event = $.Event('log', {id: _id});
        $container.trigger($event);
    } else {
        $container.empty();
    }
});
$container.on('log', function(e){
    $container.append('<p>Event fired on button #'+e.id+'</p>');
});