JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="popup" data-name="name" class="dialog">
    <a href="#close"><img src="http://bit.ly/1qAuZh3" alt="..." width="166" height="104" align="left"/></a>
    <p></p>            
</div>

<table border="1">
    <tr>
        <td class="cell-which-triggers-popup">exampleName</td>
    </tr>
</table>

CSS

#popup{
    display: none;
    border: 1px solid black;
}

.cell-which-triggers-popup{
    cursor: pointer;    
}

.cell-which-triggers-popup:hover{
    background-color: yellow;    
}

JavaScript

$(".cell-which-triggers-popup").click(function(event){
        var cell_value = $(event.target).text();
        showPopup(cell_value)    
    });

    function showPopup(your_variable){
        $("#popup").dialog({
            width: 500,
            height: 300,
            open: function(){
                $(this).find("p").html("Hello " + your_variable)
            }
        });
    }