JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="reset" value="reset" />
<div class="buttonBox"></div>

CSS

#reset {
    height:30px;
    width: 100px;
    margin-bottom:25px;
    background-color: #f4f4f4;    
}

.buttonBox {
    height:100px;
    width: 100px;
    background-color: blue;    
}

.selectedBox {
    background-color: red;
    
}

JavaScript

var bool = false;
var buttonBox = $(".buttonBox"); 

buttonBox.off("click");
    buttonBox.on("click", function (event, ui) {
        console.log("class Added");
        $bool = true;                 
        var self = $(this);
        self.addClass("selectedBox"); 
    });

buttonBox.draggable({
        distance: 40,
        disabled: bool,
        revert: "invalid",
        revertDuration: 400,
        refreshPositions: true,
        
    });


// for demo purposes

$("#reset").click(function() {
     cleanSlate();
});

var cleanSlate = function () {
    buttonBox.removeClass("selectedBox");
    $bool = false;
    console.log($bool);
}