JSFiddle - React, Tailwind, and code Playground

HTML

<button disabled>test</button>

JavaScript

$(document).ready(function () {
    $(document).on('click', '.click-div', function () {
        console.log('clicked');
        alert('clicked');
    });

    disableButton($('button'));
    //enableButton($('button'));
    
});

function disableButton($el){
    var wrapper = $el.wrap("<div class='wrapper'>").parent();
    wrapper.css({"display":"inline","position":"relative"});
    var divClick = $("<div class='click-div'>");
    divClick.css({"position":"absolute",
                  "top":0,
                  "height":"100%",
                  "width":"100%"
                 });
    wrapper.append(divClick);
}

function enableButton($el){
    $el.next(".click-div").remove();
    $el.unwrap("<div class='wrapper'>");
    $el.prop("disabled",false);
}