JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
    <tr class="recordrow" id="row-1"> <!-- row-X will be the unique way to identify the row -->
       <td>John</td>
       <td>Doe</td>
    </tr>
</table>

<!-- Now we create the details Div, but as reference to the `row-X` -->
<div class="details" id="details-1">
   ... More details of the records
</div>

CSS

.details {
    background: #ccc;
    position: absolute;
    width: 300px;
    top: 30px;
    left: 100%;
    display: none;
}

JavaScript

$(".recordrow").click(function() {
    var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
    $("#"+divid).show().animate({ "left": '200px'}); //Bring the div from right to left with 200px padding from the screen
});