JSFiddle - React, Tailwind, and code Playground

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

/*#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, // if set to "auto" the dialog will take the height of its content
    width: 500,
    modal: true,
    buttons: {
        'Button': function(){
        // button functionality
        alert('Some action');
        $( this ).dialog( "close" );
        },
    'Button 2': function(){
        // do nothing and close the modal
        $( this ).dialog( "close" );
    }
    }
});
for (var i = 0; i < 3; 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);
}