JSFiddle - React, Tailwind, and code Playground

by Cwalkdawg

HTML

<ul>
    <li><a href="javascript:void(0)" class="clicker">Clicker 1</a>

    </li>
    <li><a href="javascript:void(0)" class="clicker">Clicker 2</a>

    </li>
    <li><a href="javascript:void(0)" class="clicker">Clicker 3</a>

    </li>
    <li><a href="javascript:void(0)" class="clicker">Clicker 4</a>

    </li>
</ul>
<div id="display"></div>

CSS

#display {
    display:none;
    background-color: #ddd;
    height: 200px;
    width: 300px;
}

JavaScript

var display = function ($el, $display) {
    if (!$display.is(":visible")) {
        $display.fadeIn("hello");
    }
    $display.html('You clicked me: ' + $el.text());
};

$('.clicker').on('click', function () {
    display($(this), $('#display'));
    display = function ($el, $display) {
        $display.html('You clicked me: ' + $el.text());
    }
});