JSFiddle - React, Tailwind, and code Playground

by CR47

HTML

<div id="left">
    <table border="1">
        <tr>
            <td>
                Item Name:
            </td>
        </tr>
        <tr>
            <td>
                <a href="#">Shea Radiance Maximum Moisture Shampoo</a>
                <span class="details">
                    Also a test.
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#">Sabino Moisture Block</a>
                <span class="details">
                    This is a test.
                </span>
            </td>
        </tr>
        <tr>
            <td>
                Wen Conditioner
            </td>
        </tr>
        <tr>
            <td>
                Joico K pak reconstructor
            </td>
        </tr>
        <tr>
            <td>
                Bee Mine Luscious Balanced Cream Moisturizer
            </td>
        </tr>
    </table>
</div>
<div id="right">
    
</div>

CSS

#left{
	display:inline-block;
}

#right{
	display:inline-block;
	border:1px solid black;
}

.details{
	display:none;
}

JavaScript

$('td a').click(function(){
		var details = $(this).next('.details');
		var dets = details.html();
		$('#right').html(dets);
	});