JSFiddle - React, Tailwind, and code Playground

by richardneililagan

HTML

<form>
    
    <input type='checkbox' name='foo' />foo<br/>
    <input type='checkbox' name='bar' />bar<br/>
    <input type='checkbox' name='herp' />herp<br/>
    <input type='checkbox' name='derp' />derp<br/>
    
</form>

<div>
</div>

CSS

html, body { font-family:arial, sans-serif; font-size:10pt; }

input {
    margin-right:10px;
}

div {
    padding:10px;
    border:1px solid #ccc;
}

p {
    margin:5px;
    padding:10px;
    background-color:#eee;
}

JavaScript

jQuery(function($) {
    
    var template = $('<p>'),
        container = $('div'),
        reaction = function (text) {
            container.append(
                template.clone().text(text)
                );
        };
    
    $('form').delegate('input:checkbox', 'click', function (e) {
        var that = this;
        
        setTimeout(function(){reaction($(that).attr('name'))}, 5000);
    });
    
    
});