JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <button class="kisser">Tom Cruise</button>
    <button class="kisser">Shah Rukh Khan</button>
    <button class="kisser">PSY</button>
    <button class="kisser">Justin Bieber</button>
    <button class="kisser">Tika Dai</button>
</div>
<!-- Basically Hidden Modal -->
<div id="inner" style="display:none">
    <button id="innerClicker">Kiss Shakira</button>
</div>
<p id="hint">Select an kisser you chose to Kiss Shakira. DONT FORGET TO COUNT KISSES!</p>

<h3>Live Updates from CNN: (Shakira trying on World Records)</h3>

<div class="results"></div>

CSS

* {
    font-family: arial
}

JavaScript

$(document).ready(function () {

    var kisses = 0;

    $("#main").delegate(".kisser", "click", function () {
        $("#inner").css("display", "block");
        $("#hint").css("display", "none");
        foo();

    });


    function foo() {
        kisses++;
    }

    $("#innerClicker").click(function () {
        if (kisses) {
            alert(kisses);
            $(".results").html("Kissed <h1>" + kisses + "</h1> times. <br />");
            $("#inner").css("display", "none");
            $("#hint").css("display", "block");
        }
    });


});