JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDlg"></div>
<div id="questiona" class="allques">
    <div class="question">What is 2 + 2?</div>
    <div class="answer">4</div>
</div>
<div id="questionb" class="allques">
    <div class="question">What is the 12th Imam?</div>
    <div class="answer">The totally wacky reason why Iran wants a nuclear bomb.</div>
</div>

CSS

.allques{margin:30px;}
.answer{display:none;}

JavaScript

var que,ans;

$('#myDlg').dialog({
    autoOpen:false,
    modal:true,
    width: 500,
    height: 'auto',
    buttons: {
        "See Answer": function(){
            $('#myDlg').html(ans);
            $('.ui-dialog-buttonset').next('button').hide();
        },
        "Close": function(){
            $('#myDlg').html('').dialog('close');
        }
    }
});

$('.allques').click(function(){
    que = $(this).find('.question').html();
    ans = $(this).find('.answer').html();
    $('#myDlg').html(que).dialog('open');
});