JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div>
    <button class="inactive">Active</button>
    <button disabled="disabled">InActive</button>
</div>

CSS

button {
    color: white;
}
button:first-child {
    background-color:green;
}

button:last-child {
    background-color:red;
}

button.inactive {
    background-color:lightgray;
}

JavaScript

$('button').click(function() {
    if (!$(this).hasClass('inactive')) {
        return;
    }
    $(this).closest('div').children('button').toggleClass('inactive');
    $(this).prop('disabled', true);
    $(this).siblings('button').prop('disabled', false);
});