некоторые узлы таблицы не скрываются по нажатию

У меня есть многомерный массив, который я получаю через api. Я его вывожу через таблицы.Вот код:

function generHTMLRec($arr){
    
    echo "<ul>";
    foreach ($arr as $key => $value) {
        if(is_array($value)){
            echo "<li> <div class = \"key\"> $key: </div> ";
            generHTMLRec($value);
            echo "</li>";
        }
        else{
            if($key == "id"){
                
            }
            else if($key == "image"){
                echo "<li class = \"$key\"> <img src = \"$value\" width = \"50px\" height = \"50px\">  </li>";
            }
            else {
                echo "<li class = \"$key\"> <span class = \"key\"> $key: </span>  $value </li>";
            }
        }
    }
    echo "</ul>";
    
}

Получается таблица, элементы которой могут содержать другие таблицы(вложенность). Я хочу реализовать логику скрытия/открытия элементов, которые содержат в себе другие вложенные элементы . Все элементы, которые можно скрыть/открыть я пометил классом "drop-down" по сути проверив, есть ли в них тег "ul". Далее, на все такие элементы я повесил событие клика. По клику я получаю родителя, то есть тот тег "li", который я хочу скрыть/показать, от него получаю всех потомков, в цикле от 1 прохожусь по потомкам(от единицы потому что первый элемент - строчка с названием, которую скрывать не нужно), и если они не содержат класса "hidden",то добавляю его. Если же содержат(значит мы хотим раскрыть список),то класс "hidden" удаляется. В общем, это работает, но не для всех узлов, некоторые элементы просто не скрываются, получается так, что в первый if программа заходит, но не добавляет класс "hidden" и я не могу понять почему. Код js:

 var obj_list = document.querySelector('.search'),
    objs_list_li = obj_list.querySelectorAll('li');

    // Перебираем все li в #list
    for (var i = 0; i < objs_list_li.length; i++) {
        // Получаем список ul находящиеся в li
        var objs_li_ul = objs_list_li[i].querySelectorAll('ul');

        // Если li имеет ul, то применяем к заголовку стиль
        if (objs_li_ul.length) {
            
            objs_list_li[i].querySelector(".key").classList.add('drop-down');

            objs_list_li[i].addEventListener('click', function(ev){
                arrElements = ev.target.parentNode.getElementsByTagName('*');
               
                    for (let i = 1; i < arrElements.length; i++) {
                        if(!arrElements[i].classList.contains('hidden')){
                            
                            arrElements[i].classList.add('hidden');
                        }
                        else{
                            arrElements[i].classList.remove('hidden');
                    }
                }
                
                
                    // }
                    
                
            })
        };
    };
   

1 скрин - пример таблицы, 2 - пример элемента, который правильно скрывается и открывается, 3 - который не скрывается, хотя "items" внутри него работает исправно.