JSFiddle - React, Tailwind, and code Playground

HTML

<div id='main'>
        <div><!--class a start-->     
            <div>letters</div>
            <div><!--class b start-->
                <div>asdf</div>
                <div>
                    <div>edglhaisue ghliaue</div>
                </div>
                <div>QWER</div>

                <div>small-letters</div>
                <div><!--class c start-->
                    <div>oiji</div>
                    <div>hue</div>
                </div><!--class c end-->
            
                <i>caps-letters</i>
                <div><!--class c start-->
                    <div>OITD</div>
                    <div>IOT</div>
                    <h3>another_branch</h3>
                    <div><!--class d start-->
                        <div>very deep</div>
                    </div><!--class d end-->
                </div><!--class c end-->
            </div><!--class b end-->
        </div><!--class a end-->
    
        <div><!--class a start-->
            <u>lkaiseulaweg</u>
            <div>
                <div>ae</div>
                <div>dd</div>
            </div>
        </div><!--class a end-->

        <div><!--class a start-->
            <i>numbers</i>
            <div><!--class b start-->
                <div>986</div>
                <div>345</div>
                <div>000</div>
                <div>999</div>
            </div><!--class b end-->
        
        </div><!--class a end-->
    
    </div>

JavaScript

(function($) {

    $.accordion_each = function(obj,options){

        function nextChar(my_string){
            return my_string.substring(0,my_string.length-1)+String.fromCharCode(my_string.charCodeAt(my_string.length-1)+1)
        };
        
        //default options (if any)
        var defaults = {};
                    
        //customized options & overiding default values (if any)
        var options = $.extend({}, defaults, options); 


        obj=$(obj);
        var tmpid=obj.attr('id')
        //initilization
        var css_style='<style>'+
                        '#'+tmpid+' div{border:1px solid black; width:300px;}'+
                    '</style>';
        obj.before(css_style)

        //add class 
        var init = obj
        init.children().addClass('a');

        var c='a';
        for(var i = 0;i<25;i++){
            $('.'+c).children()
                    .next()
                    .has('div')
                    .addClass(c=nextChar(c))
                    .hide()
        };
        
        //if wrap with div if reqd.
        var wrapping = obj.find('*').not('div');
        wrapping.wrap("<div/>")

        function change(evt,myobj){
            if(myobj.attr('class')!='a'){
                evt.stopPropagation();
                if(myobj.next().attr('class') == nextChar(myobj.parent().attr('class')) ){
            
                    var cur = myobj.next();
                     
                    if(cur.css('display')=='none'){
                        var c = myobj.next().attr('class');
                        $('.'+c).slideUp(1000);
                        while(c!='z'){
                            c=nextChar(c)
                            $('.'+c).slideUp(1000);
                        }
                        
                        cur.slideDown(1000);
                
                    }else{
                        var c = myobj.next().attr('class');
                        $('.'+c).slideUp(1000);
                       ...