Can someone please tell me why not all of my lists are toggling using javascript? Some of them are toggling... but some of them arent. I am using Laravel Eloquent to generate lists of categories with nested subcategories. Here is my code:

@extends('page.main_template')
@section('content')
   
   <div class="container heading">
            <h1>All Categories</h1>
   </div>
    
    <hr style="border-top: 1px solid #96351A; width: 100%;">

    <div class="container category-view-all">
        <?php $counter = 1; ?>
            <div class="row">
                @foreach($mainCategories as $category)
                    <div class="col-xs-12 col-md-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2>{{ strtoupper($category->name) }}</h2>
                            </div>
                            <div class="panel-body">
                                <ul id="allcats">
                                    @foreach($category->children as $subcategory)
                                        <li><a href="{{URL::to('category/'.$category['slug'].'/'.$subcategory['slug'])}}">{{ $subcategory->name }}</a></li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    <?php 
                        $counter++;
                        if($counter % 3 == 1){
                            echo '<div class="clearfix"></div>
                                    </div>
                                    <div class="row">';
                        };
                    ?>
                @endforeach
        </div>
   </div>
@stop

@section('js')
    @parent
        <script>
            $('ul#allcats').each(function(){
              var max = 6
                if ($(this).find("li").length > max) {
                    $(this)
                      .find('li:gt('+max+')')
                      .hide()
                      .end()
                      .append('<li class="accordian"><span class="show-button" id="show_more"><i class="glyphicon glyphicon-plus"></i> Show More</span></li>');
                            $('.accordian').click( function(){
                            $(this).siblings(':gt('+max+')').toggle();
                            if ( $('#show_less').length) {
                                $(this).html('<span class="show-button" id="show_less"><i class="glyphicon glyphicon-minus"></i> Show Less</span>');
                            } else {
                                $(this).html('<span class="show-button" id="show_more"><i class="glyphicon glyphicon-plus"></i> Show More</span>');
                            };
                            });
                }
            });
        </script>
@stop