JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blue pyramid ui-draggable northwest" style="position: absolute; left: 450px; top: 150px;"></div>

<input type="button" value="click" id="foo" />

JavaScript

/*$('#foo').on('click', function () {
    var currentTile = $('div');
    setTimeout(function () {
		currentTile.removeClass().addClass('blank ui-draggable');        
        console.log(currentTile.attr('class'));
    }, 1000);
});*/

currentTile = $('div');
classes = {destroyed: 'destroyed', blank: 'blank'};
console.log('before destroyed className: ' + currentTile.get(0).className);
currentTile.addClass(classes.destroyed);
console.log('after destroyed className: ' + currentTile.get(0).className);

setTimeout(function () {
    console.log('before blanking className: ' + currentTile.get(0).className);
    currentTile.removeClass().addClass(classes.blank + ' ui-draggable');
    console.log('after blanking className: ' + currentTile.get(0).className);
}, 2000);

setTimeout(function () {
    console.log('before blanking attr(class): ' + currentTile.get(0).className);
    currentTile.removeAttr('class').addClass(classes.blank + ' ui-draggable');
    console.log('after blanking attr(class): ' + currentTile.get(0).className);
}, 4000);