JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
            <div>container content 1</div>
            <div>container content 2</div>
            <div><button name="testbutton">Run Example Function</button>
        </div>
        
        <div id="donChikolio" class="boss hidden">
            <h2 name="title">Don Chikolio</h2>
            <p style="margin-top:60px;"></p>
            <p name="options" class="hidden"></p>
        </div>

CSS

body {
            margin:0;
            padding:0;
        }
        
        #container {
            margin:0 auto;
            padding:15px;
            width:1050px;
            text-align:center;
        }
        
        #save {
            float:left;
            width:240px;
            margin-left:185px;
            margin-top:25px;
            font-size:19px;
        }
        
        #save img {
            vertical-align:middle;
        }
        
        #upgrades_container {
            float:left;
            width:33%;
        }
        
        #upgrades_container a {
            color:white;
            text-decoration:none;
        }
        
        #mining_container {
            float:left;
            margin:0 auto;
            width:33%;
        }
        
        #vault_container {
            float:right;
            width:33%;
        }
        
        #vault {
            
        }
        
        .button_mine {
            width:100%;
            font-size:26px;
        }
        
        #mine_box {
            margin-top:10px;
        }
        
        .upgrade {
            width:70%;
            padding:7px;
            margin:0 auto;
            margin-bottom:7px;
            border:1px solid grey;
            background-color:grey;
            color:white;
            text-align:left;
        }
        
        .upgrade img {
            margin-right:10px;
            float:left;
        }
        
        #money_display {
            padding:6px;
            color:white;
            background-color:#367C17;
            -moz-border-radius: 50px;
            border-radius: 50px;
        }
        
        .displaytext {
            padding:6px;
            color:white;
            background-color:grey;
            -moz-border-radius: 50px;
            border-radius: 50px;
        }
        
        .boss {
            width:1000px;
            margin:0 auto;
            tex-align:left;
        }
        
        .hidden...

JavaScript

var bosses = {
    'zombieBoss' : {
        'div' : '#zombieBoss',
        'messagebox' : '#zombieBoss p:first',
        'optionsbox' : '#zombieBoss p[name="options"]'
    },
    'chikolio' : {
        'div' : '#donChikolio',
        'messagebox' : '#donChikolio p:first',
        'optionsbox' : '#donChikolio p[name="options"]'
    }
}

$(document).on('click','button[name="testbutton"]', runTest);

function runTest(){
    var message = "Yes, this is indeed a message.";
    var options = {
        'option1' : {
            'text' : "button1",
            'response' : "This is a response for clicking button 1.",
            'func' : function(){
                alert('option  1 was chosen, but is the response message showing up?');
            }
        },
        'option2' : {
            'text' : "button2",
            'response' : "Response to choosing option 2.",
            'func' : function(){
                alert('option 2 was chosen, but is the response message showing up?');
            }
        }
    }
                
    displayBossMessage('chikolio',message,options,false);
}

function displayBossMessage(boss,message,options,timer){
    var origBoss = boss;
    boss = bosses[boss];
    
    //clear any possible lingering text/buttons
    $(boss.messagebox).text('');
    $(boss.optionsbox).text('');
    displayMessage_CurrentBoss = boss;
    
    //if no options provided, set a default "continue" button
    if(options == ''){
        options = {
            'default' : {
                'text' : 'Continue',
                'func' : function(){}
            }
        }
    }
    
    $('#container div').hide();
    $(boss.div).fadeIn(1500);
    
    writeMessage(message,$(boss.messagebox),0);
    
    setTimeout(function(){
        $(boss.optionsbox).fadeIn(1000);
    },3000);
    
    //"listen" for a choice
    var i = 0;
    for(option in options){
        $(boss.optionsbox).html($(boss.optionsbox).html() + '<button name="'+ i +'">'+...