JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<div class="someClass" data-spaces="1" data-section="welcome">Click me</div>

CSS

.someClass {
    padding: 20px;
    background-color: #f1f1f1;
    color: #000;
    width: 200px;
    margin: 0 auto;
    text-align: center;
}

JavaScript

$(document).ready(function () {
    $('.someClass').on("click", function (e) {
        function dataState() {
            return console.log('This number of spaces is: ' + $(e.target)[0].dataset.spaces + ' and the section is: ' + $(e.target)[0].dataset.section)
        };
        if ($(e.target)[0].dataset.spaces === "1") {
            $(e.target)[0].dataset.spaces = "2";
            $(e.target)[0].dataset.section = "expertise";
            $(e.target).html("clicked");
            dataState();
        } else {
            $(e.target)[0].dataset.spaces = "1";
            $(e.target)[0].dataset.section = "welcome";
            $(e.target).html("click me");
            dataState();
        };
    });
});