JSFiddle - React, Tailwind, and code Playground

HTML

<input id="option1btn" type="checkbox"> 
<input id="option2btn" type="checkbox"> 
<input id="option3btn" type="checkbox"> 
<input id="option4btn" type="checkbox">

<table id="optionTable">
    <tr class="option1">
        <td>a</td>
    </tr>
    <tr class="option1">
        <td>b</td>
    </tr>
    <tr class="option2 option4">
        <td>c</td>
    </tr>
    <tr class="option1 option4">
        <td>d</td>
    </tr>
    <tr class="option4">
        <td>e</td>
    </tr>
    <tr class="option1 option3 option4">
        <td>f</td>
    </tr>
    <tr class="option4">
        <td>g</td>
    </tr>
</table>

CSS

.option1,.option2,.option3,.option4 {
  display: none;
}
.show {
  display: block;
}
.

JavaScript

$("#option1btn").on('click',function() {
console.log("asas");
	$('.option1').toggleClass('show');
})
$("#option2btn").on('click',function() {
	$('.option2').toggleClass('show');
})
$("#option3btn").on('click',function() {
	$('.option3').toggleClass('show');
})
$("#option4btn").on('click',function() {
	$('.option4').toggleClass('show');
})