JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<div id="wrapper">
    <div class="test1">
        <img src="x-led.png" />
    </div>
    <div class="test2">
        <img src="x-led.png" />
    </div>
    <div class="test3">
        <img src="x-led.png" />
    </div>
</div>

JavaScript

$('#wrapper img').click(function (e) {
    var to = 10000;
    var from = 1000;
    var numbers = [];
    numbers[0] = Math.floor(Math.random() * (to - from + 1) + from);
    numbers[1] = Math.floor(Math.random() * (to - from + 1) + from);
    numbers[2] = Math.floor(Math.random() * (to - from + 1) + from);

    // Assign scores to divs
    $('#wrapper > div').each(function (i, e) {
        var $div = $(e);
        $div.data("num", numbers[i]);
    });

    var $clickedImg = $(e.target);
    var $clickedDiv = $clickedImg.parent();
    var $siblings = $clickedDiv.siblings();

    $clickedDiv.fadeOut(1000, function () {
        $clickedDiv.html('You Won: ' + $clickedDiv.data('num')).fadeIn(3000, function () {
            $siblings.each(function (i, e) {
                var $sib = $(e);
                $sib.fadeOut(1000, function () {
                    $sib.html('You Won: ' + $sib.data('num')).fadeIn(3000);
                });
            });
        });
    });

});