JSFiddle - React, Tailwind, and code Playground

by richardneililagan

HTML

<div class="column">
    <button>Schedule</button>
</div>

<div class="column">
    <button>Schedule</button>
</div>

<div class="column">
    <button>Schedule</button>
</div>

CSS

.column { 
    float:left; width:100px; background-color:#eef; padding:10px; margin:5px; 
}

.column button {
    width:100%;
}

JavaScript

jQuery(function($) {
    
    $('.column')
        .delegate('button:contains(Schedule)', 'click', function () {
        
            var _t = $(this);
            _t.text('Cancel')
                .data('schedule', setTimeout(function () {
                    
                    _t.text('Schedule').parents('.column')
                      .append('<p>foobar!</p>');
                                        
                }, 5000));                                    
        
        })
        .delegate('button:contains(Cancel)', 'click', function () {
            
            var _t = $(this);
            _t.text('Schedule');
            
            clearTimeout(_t.data('schedule'));
            
        });
    
});