JSFiddle - React, Tailwind, and code Playground

HTML

<h2>subjects</h2>

<button class="opener" data-id="#dialog1">maths</button>
<div class="dialog" id="dialog1" title="Dialog Title">maths is an important subject.</div>
<br>
    
<button class="opener" data-id="#dialog2">english</button>
<div class="dialog" id="dialog2" title="Dialog Title">this is also very important</div>
<br>

JavaScript

$(".dialog").dialog({
    autoOpen: false
});

$(".opener").click(function () {
    var id = $(this).data('id');

    $(id).dialog("open");
});