JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="0" class="set_preference">
    <li class="1stlevel">1st-Entertainment
        <ul>
            <li class="2ndlevel">2nd-Films
                <ul>
                    <li class="3rdlevel">3rdTollywood
                        <ul>
                            <li class="4thlevel">
                             <input type="checkbox" value="58" name="checkChild[]" class1="checkChild css-checkbox" id="cat_58">Bhooter bhabishyat</li>
                        </ul>
                    </li>
                    <li class="3rdlevel">3rdbollywood
                        <ul>
                            <li class="4thlevel">4th<input type="checkbox" value="60" name="checkChild[]" class1="checkChild css-checkbox" id="cat_60">krish</li>
                        </ul>
                    </li>
                    <li class="3rdlevel">3rdHollywood
                        <ul>
                            <li class="4thlevel">4th<input type="checkbox" value="62" name="checkChild[]" class1="checkChild css-checkbox" id="cat_62">Spiderman</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Television
                <ul>
                </ul>
            </li>
        </ul>
    </li>
    <li class="1stlevel">1st-Celebrities
        <ul>
            <li class="2ndlevel">2nd-Film
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Music
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Public Life
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Sports
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-Others
                <ul>
                </ul>
            </li>
            <li class="2ndlevel">2nd-<input type="checkbox" value="18" name="checkChild[]" class1="checkChild css-checkbox"...

JavaScript

$j = $;
$j('.2ndlevel').hide();
$j('.3rdlevel').hide();
$j('.4thlevel').hide();
$j('.1stlevel').click(function(){
            $(this).find('.2ndlevel').show();
            $j(this).children().css({"border":"1px solid red"});
//            $j(this).find('ul li').hide();
        });
        $j('.2ndlevel').click(function(){
            $(this).find('.3rdlevel').show();
            $j(this).children().css({"border":"1px solid pink"});
//            $j(this).find('ul li').hide();
//            $j(this).find('ul li').hide();
        });
        $j('.3rdlevel').click(function(){
            $(this).find('.4thlevel').show();
            $j(this).children().css({"border":"1px solid green"});
//            $j(this).find('ul li ul li').hide();
            //$j(this).find('ul li').hide();
        });
        $j('.4thlevel').click(function(){
            $j(this).children().css({"border":"1px solid red"});
//            $j(this).find('ul li').hide();
        });