JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    function hidecol() {
        if (document.getElementById("txt1").checked) {
            var elements = document.getElementsByClassName('col1')
            for (var i = 0; i < elements.length; i++) {
                elements[i].style.display = 'none';
            }
        }
        if (document.getElementById("txt2").checked) {
            var elements = document.getElementsByClassName('col2')
            for (var i = 0; i < elements.length; i++) {
                elements[i].style.display = 'none';
            }
        }
    }
</script>

<table>
    <tr>
        <th class="col1" id="col1">Genus</th>
        <th class="col2" id="col2">Species</th>
        <th class="col3" id="col3">Resides in locations</th>
    </tr>

    <tr>

        <td class="col1">
            {% for a in genus %}
            <p>{{ a[0] }}</p>
            {% end %}
        </td>

        <td class="col2">
            {% for b in species %}
            <p>{{ b[0] }}</p>
            {% end %}
        </td>

        <td class="col3">


            {% for d in location %}
            <ul>
                <li>
                    {{ d[0] }}
                </li>
            </ul>
            {% end %}
        </td>
    </tr>
</table>
<input type="checkbox" onchange="hidecol()" id="txt1" />col1
<input type="checkbox" onchange="hidecol()" id="txt2" />col2