JSFiddle - React, Tailwind, and code Playground

HTML

<table class="drillDown" border="1" align="center">

        <colgroup>
            <thead>
            <tr>
                <th>Category</th>
                <th>Subcategory</th>

            </tr>
        </colgroup>
        </thead>
        <tbody>

        <!--PARENT ROW-->
        <tr class="parent">
            <td>Category 1</td>
            <td colspan="2">$12,345.45</td>

        </tr>

        <tr class="child" >
            <td>&nbsp;</td>
            <td colspan="2">Subcategory_1 A</td>
        </tr>
        <tr class="child">
            <td>&nbsp;</td>
            <td colspan="2">Subcategory_1 B</td>
        </tr>

        <!--PARENT ROW-->
        <tr class="parent">
            <td>Category 2</td>
            <td colspan="2">$135,754.99</td>
        </tr>
        <tr class="child" >
            <td>&nbsp;</td>
            <td colspan="2">Subcategory_2 A</td>
        </tr>
        <tr class="child">
            <td>&nbsp;</td>
            <td colspan="2">Subcategory_2 B</td>
        </tr>
        <tr class="child">
            <td>&nbsp;</td>
            <td colspan="2">Subcategory_2 C</td>
        </tr>

        <tr class="parent">
            <td>Catgegory 3</td>
            <td colspan="2">$232,563.46</td>
        </tr>
        <tr class="child" >
            <td>&nbsp;</td>
            <td colspan="2">Subcategory_3 A</td>
        </tr>
        <tr class="child">
            <td>&nbsp;</td>
            <td colspan="2">Subcategory_3 B</td>
        </tr>
        <tr class="child">
            <td>&nbsp;</td>
            <td colspan="2">Subcategory_3 C</td>
        </tr>
        </tbody>
    </table>

JavaScript

$('.drillDown tr td:last-child, .drillDown tr th:last-child').hide();

$('.drillDown tr td:first-child, .drillDown tr th:first-child').click(function(){
	$('.drillDown tr td:last-child, .drillDown tr th:last-child').show();
})

 
        $('table.drillDown').each(function() {

            var $table = $(this);
            $table.find('.parent').click(function() {
                console.log( "*****Click on Parent" );
                $(this).nextUntil('.parent').toggle(); 

            });

            var $childRows = $table.find('tbody tr').not('.parent').hide();
            $table.find('button.hide').click(function() {
                $childRows.hide();

            });
            $table.find('button.show').click(function() {
                $childRows.filter('.child').show();
            });
            $table.find('tr.child').click(function(){
                $(this).nextUntil('.child').show()
            });

        });