JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="side-filter">
            <!-- Parent Div -->
            <div class="main-div">
                <div class="View-name" onclick="openProtocolView()">
                    <label for="ProtocolView">Protocol View</label>
                    <input type="radio" id="ProtocolView" name="MainView" value="ProtocolView">
                </div>
                <div class="View-name" onclick="openSmartView()">
                    <label for="smartView">Smart View</label>
                    <input type="radio" id="smartView" name="MainView" value="smartView">
                </div>
                <div class="View-name" onclick="openShapeView()">
                    <label for="shapeView">Shape View</label>
                    <input type="radio" id="shapeView" name="MainView" value="shapeView">
                </div>
            </div>
            <div style="display: none" id="ProtocolViewChild">
                <!-- Protocol View Childs -->
                <div class="main-div">
                    <div class="View-name" onclick="openProtocolViewChildHorizontal()">
                        <label for="ProtocolHorizontalView">Horizontal View</label>
                        <input type="radio" id="ProtocolHorizontalView" name="ProtocolViewChild" value="ProtocolHorizontalView">
                    </div>
                    <div class="View-name" onclick="openProtocolViewChildVertical()">
                        <label for="ProtocolVerticalView">Vertical View</label>
                        <input type="radio" id="ProtocolVerticalView" name="ProtocolViewChild" value="ProtocolVerticalView">
                    </div>
                </div>
                <!-- Protocol View - Horizontal -->
                <div style="display: none;" class="main-div" id="ProtocolViewChildHorizontal">
                    <div class="View-name">
                        <label for="ACode">A...

CSS

.side-filter {
                width: 250px;
            }
            .main-div {
                padding: 10px;
                font-family: sans-serif;
                margin-bottom: 10px;
                border-bottom: 1px dashed;
            }
            .View-name {
                padding: 5px 0;
                cursor: pointer;
            }
            .main-div label {
                width: 150px;
                display: inline-block;
                cursor: pointer;
            }
            .main-div input[type="radio"] {
                cursor: pointer;
            }

JavaScript

function openProtocolView(){
    $('input:radio[name=ProtocolViewVerticalSingleBoth]').each(function () { $(this).prop('checked', false); });
    $('input:radio[name=ACodebcode]').each(function () { $(this).prop('checked', false); });
    $('input:radio[name=bcode_ccvs]').each(function () { $(this).prop('checked', false); });

    $("#ProtocolViewChild").css("display","block")
    hideAllOtherViewThanProtocol()
}
function openProtocolViewChildHorizontal(){
    
    $('input:radio[name=ProtocolViewVerticalSingleBoth]').each(function () { $(this).prop('checked', false); });

    $("#ProtocolViewChildHorizontal").css("display","block")
    $("#ProtocolViewChildVertical").css("display","none")
    $("#ProtocolViewChildVerticalSingleSide").css("display","none")
}
function openProtocolViewChildVertical(){
    
    $('input:radio[name=ACodebcode]').each(function () { $(this).prop('checked', false); });
    $('input:radio[name=bcode_ccvs]').each(function () { $(this).prop('checked', false); });

    $("#ProtocolViewChildHorizontal").css("display","none")
    $("#ProtocolViewChildVertical").css("display","block")
}

function hideAllOtherViewThanProtocol(){
    
    $("#smartViewChild").css("display","none")

    $("#shapeViewChild").css("display","none")
}

function hideAllOtherViewThanShape(){
    $("#smartViewChild").css("display","none")
    $("#ProtocolViewChild").css("display","none")
}

function hideAllOtherViewThanSmart(){  
    $('input:radio[name=ProtocolViewChild]').each(function () { $(this).prop('checked', false); });
    $("#ProtocolViewChild").css("display","none")
    $("#shapeViewChild").css("display","none")
    $("#ProtocolViewChildHorizontal").css("display","none")
    $("#ProtocolViewChildVertical").css("display","none")
    $("#ProtocolViewChildVerticalSingleSide").css("display","none")
}

function openProtocolViewVerticalSingleBoth(){
    $('input:radio[name=ACodebcode]').each(function () { $(this).prop('checked', false); });
   ...