絞り込み機能と「もっと見る」を同時に使いたい

どこを編集すればよいか分からずにいます。
ご教示いただけますと幸いです。宜しくお願い致します。

現在の状況

・「ALL」を選択時のみ「もっと見る」と「表示を戻す」ボタンが表示される
・「もっと見る」をクリックすると、10件目以降の記事が10件ずつ表示される
・カテゴリは1つのみ選択できる

実現したいこと

・「全表示」だけではなく、各カテゴリで表示した時にも10件以上ある場合は「もっと見る」を使えるようにしたい
・カテゴリは1つのみではなく、複数選択できるようにしたい

追記

$('#more_btn').hide(); を削除したところ、「もっと見る」が各カテゴリにも表示されました。
ですがクリックすると、該当のカテゴリ以外の記事も表示されてしまいます。
選択しているカテゴリの記事のみを表示させたいです。

該当のソースコード

<html>
    <head>
        <!--jQueryソース-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>

    <!--最低限のCSS-->
    <style>
        .is-hide{
            display: none;
        }
        .is-active{
            color: red;
        }
    </style>

    <body>
        <div id="page works-main">
            　<div class="search searchList categories">
            　　<span class="search_item is-active" data-group="">ALL</span>
            　　<span class="search_item" data-group="a">カテゴリA</span>
            　　<span class="search_item" data-group="b">カテゴリB</span>
            　　<span class="search_item" data-group="c">カテゴリC</span>
            　　<span class="search_item" data-group="d">カテゴリD</span>
            　　<span class="search_item" data-group="e">カテゴリE</span>
            　</div>

            　<div id="entry_list_more" id="gallery">
            　　<!-- /記事一覧 --> 
                <ul class="list">
            　　　<li class="list_item" data-group="a">1件目の記事</li>
            　　　<li class="list_item" data-group="a">2件目の記事</li>
            　　　<li class="list_item" data-group="a">3件目の記事</li>
            　　　<li class="list_item" data-group="a">4件目の記事</li>
            　　　<li class="list_item" data-group="b">5件目の記事</li>
            　　　<li class="list_item" data-group="b">6件目の記事</li>
            　　　<li class="list_item" data-group="b">7件目の記事</li>
            　　　<li class="list_item" data-group="b">8件目の記事</li>
            　　　<li class="list_item" data-group="b">9件目の記事</li>
            　　　<li class="list_item" data-group="c">10件目の記事</li>
            　　　<li class="list_item" data-group="d">11件目の記事</li>
            　　　<li class="list_item" data-group="d">12件目の記事</li>
            　　　<li class="list_item" data-group="d">13件目の記事</li>
            　　　<li class="list_item" data-group="d">14件目の記事</li>
            　　　<li class="list_item" data-group="e">15件目の記事</li>
            　　　<li class="list_item" data-group="e">16件目の記事</li>
            　　　<li class="list_item" data-group="e">17件目の記事</li>
            　　　<li class="list_item" data-group="e">18件目の記事</li>
            　　　<li class="list_item" data-group="e">19件目の記事</li>
            　　　<li class="list_item" data-group="e">20件目の記事</li>
            　　　<li class="list_item" data-group="e">21件目の記事</li>
            　　　<li class="list_item" data-group="e">22件目の記事</li>
            　　　<li class="list_item" data-group="e">23件目の記事</li>
            　　　<li class="list_item" data-group="e">24件目の記事</li>
            　　　<li class="list_item" data-group="e">25件目の記事</li>
            　　　<li class="list_item" data-group="e">26件目の記事</li>
                </ul>        
            　　　<div id="more_btn">もっと見る <i class="fa fa-chevron-down" aria-hidden="true"></i></div>
            　　　<div id="close_btn">表示を戻す <i class="fa fa-chevron-up" aria-hidden="true"></i></div> 
            </div>
    </body>
</html>

<script>
    　var searchItem = '.search_item';  
    　var listItem = '.list_item';       
    　var hideClass = 'is-hide';         
    　var activeClass = 'is-active';    

    　$(function() {
        $(searchItem).on('click', function() {
            $(listItem).removeClass(hideClass); //hideclassを削除
            $('.list_item').css('display',''); //すべて表示

            $(searchItem).removeClass(activeClass);
            var group = $(this).addClass(activeClass).data('group');
            if(group==""){ //ALL選択時はData属性は空白
                startUp() //初期表示に戻す
            }else{
                search_filter(group); //絞り込み
                //ボタン非表示
                $('#more_btn').hide();
                $('#close_btn').hide();
            }
        });
    　});

    　function search_filter(group) {
      　$(listItem).removeClass(hideClass);
        // 値が空の場合はすべて表示
        if(group === '') {
            return;
        }
        for (var i = 0; i < $(listItem).length; i++) {
            var itemData = $(listItem).eq(i).data('group');
            if(itemData !== group) {
                $(listItem).eq(i).addClass(hideClass);
            }
        }
    　}       

</script>
<script>
    var listContents = $("#entry_list_more li").length;
    startUp() //初期表示

    //初期表示時とALL再選択されたときに実行
    function startUp(){
        $("#entry_list_more").each(function(){
            var Num = 10;
            if(listContents > 10){
                $(this).find('#more_btn').show();
            }else{
                $(this).find('#more_btn').hide();
            }
            $(this).find('#close_btn').hide();
            $(this).find("li:not(:lt("+Num+"))").hide();

            $('#more_btn').click(function(){
                Num +=5;
                $(this).parent().find("li:lt("+Num+")").slideDown();

                if(listContents <= Num){
                    Num = 10;
                    gtNum = Num-1;
                    $('#more_btn').hide();
                    $('#close_btn').show();

                    $('#close_btn').click(function(){
                        $(this).parent().find("li:gt("+gtNum+")").slideUp();
                        $(this).hide();
                        $('#more_btn').show();
                    });
                }
            });
        });
    }
</script>