JSFiddle - React, Tailwind, and code Playground

HTML

<tr>
    <td><strong>Involved</strong>
    </td>
    <td>
        <button id="but">Add data
            <button>
    </td>
</tr>
<div id="dialog" title="Attila Hun" style="display:none">Your content
    <table>
        <tr>
            <th>Name</th>
            <th>PhoneNO</th>
            <th>Address</th>
        </tr>
        <tr>
            <td>Asad</td>
            <td>03217087784</td>
            <td>Lahore</td>
        </tr>
    </table>
        </div>

CSS

#backgroundPopup {
    position: fixed;
    display:none;
    height:100%;
    width:100%;
}
#toPopup {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 4px solid #ccc;
    display: none;
    font-size: 14px;
    left: 80%;
    margin-left: -402px;
    position: fixed;
    top: 50%;
    width: 270px;
    height:70px;
}

JavaScript

jQuery(function ($) {
    $( "#dialog" ).dialog({
      autoOpen: false,
        modal:false,
      show: {
        effect: "Clip",
        duration: 1000
      },
      hide: {
        effect: "Slide",
        duration: 1000
      }
    });

    $("#but").on("click", function () {
        $("#dialog").dialog("open");
    });


    $("a.topopup").click(function () {
        loading();
        setTimeout(function () {
            loadPopup();
        }, 500);
        return false;
    });

    function loading() {
        $("div").show();
    }

    var popupStatus = 0;

    function loadPopup() {
        if (popupStatus == 0) {
            closeloading();
            $("#toPopup").show();
        }
    }

    function disablePopup() {
        if (popupStatus == 1) {
            $("#toPopup").hide("normal");
            $("#backgroundPopup").hide("normal");
            popupStatus = 0;
        }
    }


    $("#save").on("click", function () {
        $("a.topopup").after("<b/>" + $("#textval").val());
        $("#toPopup").hide();
    });

    });