JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
    <td>
        <input type="text" />
    </td>
            <td>
    </td>

</tr>
<tr style="display:none">
    <td>
    <input type='radio' />
    </td>
            <td>
                <input type='checkbox' />
    </td>
    </tr>
<tr style="display:none">
    <td>
    <input type='text' />
    </td>
            <td>
                <input type='text' />
    </td>
    </tr>


</table>

CSS

table, td { padding: 10px; border:1px solid #CCC }

JavaScript

function refreshCascadingLists() {
    //Get an array of tr's
    //Loop thorugh each and see if it should be shown based on it's predecessors status
    var prevHadUnselected = false;
    $("table tr").next("tr").each(function(curIdx, curEntity) {
        if (prevHadUnselected) {
            $(this).fadeOut();
        } else {
            $(this).fadeIn();
        }
        
        prevHadUnselected = false;
        $(this).find(":input").each(function(curSelIdx, curSelEntity) {
            if ($(curSelEntity).val() == "")
                prevHadUnselected = true;
        });
        console.log(prevHadUnselected);
    });
}

$(document).ready(function() {
    $(":input").bind('keyup change',function() {
        refreshCascadingLists();
    });
});