JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr class="row-1">
        <td>A</td>
        <td>1</td>
    </tr>
    <tr class="row-2">
        <td>B</td>
        <td>2</td>
    </tr>
    <tr class="row-3">
        <td>C3</td>
        <td></td>
    </tr>
    <tr class="row-total">
        <td>
            <input type="button" value="Toogle">
        </td>
        <td>TOTAL</td>
    </tr>

    <tr class="row-1">
        <td>D</td>
        <td>4</td>
    </tr>
    <tr class="row-2">
        <td>E</td>
        <td>5</td>
    </tr>
    <tr class="row-3">
        <td>F</td>
        <td>6</td>
    </tr>
    <tr class="row-total">
        <td>
            <input type="button" value="Toogle">
        </td>
        <td>TOTAL</td>
    </tr>

</table>

CSS

tr {
	display: none;
}
tr.row-total {
	display: block;
}

JavaScript

$('input').on('click', function() {
    $(this).closest('tr').prevAll().each(function(){
		if (this.classList.contains('row-total')) return false;
		$(this).toggle();
	});
});