JSFiddle - React, Tailwind, and code Playground

by ozancn

HTML

<input type="button" value="toggle" id="toggle">
<div id="clickable"></div>
<input type="button" disabled data-t="food" data-q="1" value="Use" id="foodHelper_0" class="foodHelperEat" />

CSS

#clickable {
    position:absolute;
    width:55px;
    height:25px;
}

JavaScript

$(document).ready(function () {
    $('#clickable').on('click', function () {
        if ($('#foodHelper_0:disabled').length > 0) {
            $('#clicks').append('|Disabled Button Clicked|<br>');
        } else {
            //do nothing and let the button handler do it
            $('#foodHelper_0').trigger('click');
        }
    });
    $('#foodHelper_0').on('click', function () {
        $('#clicks').append('|ENABLED button clicked|<br>');
    });
    $('#toggle').on('click', function () {
        if ($('#foodHelper_0:disabled').length > 0) {
            $('#foodHelper_0').removeAttr('disabled');
            $('#clickable').css({
                'width': '0px',
                'height': '0px'
            });
        } else {
            $('#foodHelper_0').attr('disabled', 'disabled');
            $('#clickable').css({
                'width': '55px',
                'height': '25px'
            });
        }
    });
});