JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>Bind / UnBind Event Handlers vs. Decision Logic</title>
 
    <!-- Linked scripts. -->
    <script type="text/javascript" src="./jquery-1.6.1.js"></script>
</head>
<body>
 
    <h1>
        Bind / UnBind Event Handlers vs. Decision Logic
    </h1>
 
    <form>
 
        <p>
            <button type="button" class="goofy">
                Click Me!
            </button>
            <button type="button" class="grumpy">
                Click Me!
            </button>
        </p>
 
        <p>
            Mood:
 
            <label>
                <input type="radio" name="mood" value="goofy" />
                Goofy
            </label>
 
            &nbsp;
 
            <label>
                <input type="radio" name="mood" value="grumpy" />
                Grumpy
            </label>
        </p>
 
    </form>
    
</body>
</html>

CSS

/* use CSS to control visibility: */

form button { display:none; }
form.mood-goofy button.goofy { display:block; }
form.mood-grumpy button.grumpy { display:block; }

JavaScript

// Get a reference to the releveant dom elements.

var dom = {};

dom.form = $( "form" );
dom.goofyButton = $( "button.goofy" );
dom.grumpyButton = $( "button.grumpy" );
dom.goofyMood = $( "input[ value = 'goofy' ]" );
dom.grumpyMood = $( "input[ value = 'grumpy' ]" );

// Change form state when radio buttons are clicked:

dom.goofyMood.click(
    function( event ) {
        dom.form.addClass('mood-goofy');
        dom.form.removeClass('mood-grumpy');
    }
);

dom.grumpyMood.click(
    function( event ) {
        dom.form.addClass('mood-grumpy');
        dom.form.removeClass('mood-goofy');
    }
);

// Bind event handlers to individual buttons:

dom.goofyButton.click(function() {
    alert( "Ha ha, that tickles!" );
});

dom.grumpyButton.click(function() {
    alert( "Take your dang hands off of me!" );
});