JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    function hideCol() {
        if (document.getElementById("txt1").value != "") {
            var elements = document.getElementsByClassName('col1')

            for (var i = 0; i < elements.length; i++) {
                elements[i].style.display = 'none';
            }
        }
        if (document.getElementById("txt2").value != "") {
            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="text" id="txt1" />
<input type="text" id="txt2" />
<input type="button" value="click me" onclick="hideCol()" />