JSFiddle - React, Tailwind, and code Playground

HTML

<table width="95%" border="2" cellspacing="2" cellpadding="2" align="center" id="categorylist"> 
    <thead>
        <tr>
            <th class="text3" width="15%">
                This
            </th>
            <th class="text3" width="15%">
                That
            </th>
            <th class="text3" width="55%">
                ABC
            </th>
            <th class="text3" width="15%">
                DEF
            </th>
        </tr>
    </thead>
    <tbody id="content">
        
        <tr class="country">
            <th style="font-weight:bold; text-align:left;" colspan="4">countryA</th>
        </tr>
        <tr>
            <td valign="top" class="text3">xxxx</td>
            <td valign="top" class="text3">yyyyyyyyy</td>
            <td valign="top" class="text3">zzzzzzzzzz</td>
            <td valign="top" class="text3">vvvvvvvvvvvvvvvv</td>
        </tr>
        
        <tr class="country">
            <th style="font-weight:bold; text-align:left;" colspan="4">countrB</th>
        </tr>
        <tr>
            <td valign="top" class="text3">xxxx</td>
            <td valign="top" class="text3">yyyyyyyyy</td>
            <td valign="top" class="text3">zzzzzzzzzz</td>
            <td valign="top" class="text3">vvvvvvvvvvvvvvvv</td>
        </tr>
        <tr class="country">
            <th style="font-weight:bold; text-align:left;" colspan="4">countryC</th>
        </tr>
        <tr>
            <td valign="top" class="text3">xxxx</td>
            <td valign="top" class="text3">yyyyyyyyy</td>
            <td valign="top" class="text3">zzzzzzzzzz</td>
            <td valign="top" class="text3">vvvvvvvvvvvvvvvv</td>
        </tr>
        <tr>
            <td valign="top" class="text3">xxxx</td>
            <td valign="top" class="text3">yyyyyyyyy</td>
            <td valign="top" class="text3">zzzzzzzzzz</td>
            <td valign="top" class="text3">vvvvvvvvvvvvvvvv</td>
        </tr>
        <tr>
            <td valign="top"...

JavaScript

$('#categorylist tbody th:first-child').prepend('<span class="togg">Toggle!</span>').css('color', 'red');

$('span.togg').click(function() {
    $(this).closest('.country').nextUntil('.country').fadeToggle()
});