JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div class="body" id="boxA"><a href="#">click to show dialog</a></div>
 
  <p>
    Click this <button name="nada" accesskey="k">button</button> to show HTML.
  </p>

<div id="boxA-dialog" title="Box A dialog">
    <p>This is for box A click</p>
</div>

CSS

div.body{margin:20px 10px;}

JavaScript

$(document).ready(function(){
   $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });
    
 $("#boxA-dialog").dialog({
            autoOpen: false,
            modal: true,
            height: 400,
            width: 300,
            open: function(event, ui) {
                ak = $('[accesskey]').each(function() {
                    $(this).data('ak', $(this).attr('accesskey')).removeAttr('accesskey')
                })
            },
            close: function(event, ui) {
                ak.each(function() {
                    $(this).attr('accesskey', $(this).data('ak'))
                })
            }
        });