JSFiddle - React, Tailwind, and code Playground

by filistea

HTML

<div id='test'>
    <button class='test'>click me</button>
</div>
<div id="ChooseStoryCategory">
    <div id="storyCategory"></div>
    <div>
        <button id="ChooseCategory">button</button>
    </div>
    <div>
        <button id="CategoryCancel">button2</button>
    </div>
</div>

CSS

blue{background:blue}

/*#ChooseCategory {
    position: absolute;
    left: 30%;
    top: 85%;
    bottom: 0;
}
#CategoryCancel {
    position: absolute;
    left: 70%;
    top: 85%;
    bottom: 0;
}*/

JavaScript

$(".test").on("click", function () {
    $("#ChooseStoryCategory").dialog("open");
});
$("#ChooseStoryCategory").dialog({
    autoOpen: false,
    title: "Upload",
    height: "auto",
    width: 500,
    modal: true,
    buttons: {
        'id="ChooseCategory" Button': function(){
        // button functionality
            //example: change the body background and close 
        $('body').toggleClass('blue')
        },
    'id="CancelCategory" Button': function(){
        // do nothing and close the modal
        $( this ).dialog( "close" );
    }
    }
});
for (var i = 0; i < 9; i++) {
    var categoryName = "PressNum" + i;
    var value = i;
    var $btn = $('<button>').text(categoryName).width(400).height(80);

    $btn.on('click', function () {
        console.log(value)
    });
    $("#storyCategory").append($btn);
};