JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="content">

        
            <table class="surveyResponses dataTable">
                <tr>
                    <td class="padding5_left">Questions</td>
                </tr>
                <tr class="data" question="1">
                    <td>Question 1</td>
                </tr>

                <tr>
                    <td>
                        <div class="margin5_left none surveyResponse" question="1">
                            <p >this ia question</p><br>
                            <p>Responses</p>
                            <table class="width100 response">
                                <tr>
                                    <td>Responses</td>
                                    <td>User</td>
                                </tr>
                            <tr class="data">
                                <td class="width75">test</td>
                                <td>User: admin</td>
                            </tr>
                            <tr class="data">
                                <td class="width75">derpness</td>
                                <td>User: michael</td>
                            </tr></table>      <br><br>
                        </div>
                    </td>
                </tr>
                
                <tr class="data" question="2">
                    <td>Question 2</td>
                </tr>

                <tr>
                    <td>
                        <div class="margin5_left none surveyResponse" question="2">
                            <p >what class is this</p><br>
                            <p>Responses</p>
                            <table class="width100 response">
                                <tr>
                                    <td>Responses</td>
                                    <td>User</td>
                                </tr>
                            <tr class="data">
                                <td...

CSS

table,th,td
{
width: 100%;
border:1px solid black;
}
.none{
    display:none;
}
.data{
    background-color: #747373;
}

.data:hover{
    background-color: #535353;
}

JavaScript

$(document).ready(function(){
    var parent = $('.surveyResponses');
    var errorBox = $('#errors', parent);

    $('.data[question]', parent).on({
        'click' : function(){
            var clicked = $(this);
            $('[question='+clicked.attr('question')+']',parent).eq(1).slideToggle('slow', function(){
                if ( $('[question='+clicked.attr('question')+']',parent).eq(1).css('display') == 'block' ) {
                    clicked.css('backgroundColor', '#535353');
                }
                else{
                    clicked.css('backgroundColor', '#747373');
                    clicked.css('backgroundColor:hover', '#535353');
                }
            });

        }
    });
});