JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.layout.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/ui.multiselect.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.tablednd.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.contextmenu.js"></script>
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.multiselect.css">
<table id="list"></table>
<div id="pager"></div>
<div id="contact_info"></div>

CSS

#contact_info{
    position: absolute;
    top: 0;
    left: 0;
    display:none;
    
    background-color: white;
    border: 1px solid gray;
    padding: 5px 3px;
    
    -moz-box-shadow: 3px 3px 4px #CCC;
    -webkit-box-shadow: 3px 3px 4px #CCC;
    box-shadow: 3px 3px 4px #CCC;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC')";
}

#list .contact{
    cursor: pointer;
}

.container{
    cursor: pointer;
}

td.contact:active{
    background-color: #FBEC88;
}

.container .dropdown{
    display: none;
}

.ui-jqgrid tr.jqgrow td{
    white-space: normal;
}

/*
    Style the dropdown box
*/

h2{
    border-bottom: 1px solid lightgray;
}

p{
    padding: 2px;
}

h2, p{
    margin: 0;
}

.close_btn{
    font-size: 10px;
    line-height: 10px;
    float: right;
    text-decoration: none;
}

JavaScript

//Preload the image to avoid flashes
search_img= new Image();
search_img.src = "http://www.iconarchive.com/download/i32215/tpdkdesign.net/refresh-cl/Symbols-Find.ico";

//The dropdown container
var contact_info = $("#contact_info");

//ID of last clicked row
var last_row;

//Sensor state determining whether document click will close the dropdown container on click
var sensor_state = true;

//Dropdown information data (base)
var dd_bp = "<img src='"+search_img.src+"'>",
    dd_inf = "<h2>Contact information</h2><p>Phone: 555-12345<br/>E-mail: something@someplace.whatever<br/>P/O Box: 555555</p>"

//Data array (don't know what you use as a source, but I'll keep it simple)
//This setup allows you to send dropdown data from the server as well :)
var data_from_server = [
    {id:"1",title:"Economy advisor",name:"Luke",lname:"North", contact: dd_bp, dropdown: dd_inf},
    {id:"2",title:"Salesperson",name:"John",lname:"Smith",contact: dd_bp, dropdown: dd_inf},
    {id:"3",title:"Economy advisor",name:"Jimmy",lname:"Hendrix",contact: dd_bp, dropdown: dd_inf},
    {id:"6",title:"IT Manager",name:"Caroline",lname:"GlaDos",contact: dd_bp, dropdown: dd_inf},
    {id:"5",title:"Quality Inspector",name:"Paul",lname:"Shoreman",contact: dd_bp, dropdown: dd_inf},
    {id:"4",title:"Quality Inspector",name:"Liza",lname:"Ingridge",contact: dd_bp, dropdown: dd_inf},
    {id:"8",title:"Distribution manager",name:"Elisabeth",lname:"Welman",contact: dd_bp, dropdown: dd_inf},
    {id:"10",title:"Quality Inspector",name:"John",lname:"Johansson",contact: dd_bp, dropdown: dd_inf},
    {id:"11",title:"Economy advisor",name:"Tommy",lname:"the Knuckle",contact: dd_bp, dropdown: dd_inf},
    {id:"9",title:"Manufacturer",name:"Rosa",lname:"Minx",contact: dd_bp, dropdown: dd_inf}
];

//Adds the content to and repositions the dropdown container to the current row cell
function show_contact_info(rowid){
    var row = $("#"+rowid),
        contact_cell = $("td.contact", row),
       ...