JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table">
                    <thead>
                        <tr>
                            <th class="sort-key asc"><a href="#">Pet Name </a></th>
                            <th><a href="#">Owner (Last, First)</a></th>
                            <th><a href="#">Species</a></th>
                            <th><a href="#">Breed</a></th>
                            <th><a href="#">ID</a></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                Fluffy
                                <div class="table-row__expanded-content">
                                    <data-key>Sex: </data-key> <data-value>Male</data-value><br />
                                    <data-key>DOB: </data-key> <data-value>12/08/2010</data-value> <br />
                                    <data-key>Weight: </data-key> <data-value>20 lbs</data-value> <br />
                                    <data-key>Location: </data-key> <data-value>Kennel 2B</data-value> <br />
                                    <data-key>Temperament: </data-key> <data-value>Aggresive</data-value> <br />
                                    <data-key>Allergies: </data-key> <data-value>Sulfa, Penicillin, Peanuts</data-value>
                                </div>
                            </td>
                            <td>Anderson, James</td>
                            <td>Dog</td>
                            <td>Bulldog-Shitzu</td>
                            <td>ABCDE1234567</td>
                        </tr>
                        <tr>
                            <td>Feather</td>
                            <td>Michelle Charlotte, <br /> Angel Vanessa</td>
                            <td>Cat</td>
                            <td>American Bobtail</td>
                            <td>FGHIJ1234567</td>
                        </tr>
                        <tr>
              ...

CSS

tr[data-display="expanded"] td {
    background:#fdd;
}

JavaScript

var tablerow = document.body.getElementsByTagName('tr');
   // Convert the HTMLCollection into a true javascript Array, so we can do "stuff" with it       
    var tablerowArr = Array.prototype.slice.call(tablerow)
    var highlighted;

	var enable = function(row){
        row.setAttribute('data-display', "expanded");
        row.setAttribute('data-state', "enabled");
    }
    var disable = function( row ){
        row.setAttribute('data-display', "collapsed");
        row.setAttribute('data-state', "disabled");
    }

    document.body.addEventListener('click', function(e){
        var target = e.target;
        while( target.parentNode && target.nodeName.toLowerCase() != 'tr' ){
         	target = target.parentNode;   
        }
        if( highlighted ){
            tablerowArr.forEach(  disable );
            highlighted = null;
        }
        else {
            tablerowArr.forEach( function(row){
                if(row == target) {
                    enable( row );
                    highlighted = row;
                }
                else {
                    disable( row ); 
                }
            });
        }
    });