Multi tab popular post Zeistmanga

.m-10{margin:10px;}
#sidebar .active{background-color:$(keycolor);color:white;}
#popular .PopularPosts {display: none}
#popular .PopularPosts.current {display: block}

<b:tag cond='data:view.isMultipleItems and !data:view.isLabelSearch' class="s1 bc-fff r2" name='div'>
<b:if cond='data:view.isMultipleItems and !data:view.isLabelSearch'>
<h3 class="title flex aic">
<svg aria-hidden="true" height="1em" preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 7a.78.78 0 0 0 0-.21a.64.64 0 0 0-.05-.17a1.1 1.1 0 0 0-.09-.14a.75.75 0 0 0-.14-.17l-.12-.07a.69.69 0 0 0-.19-.1h-.2A.7.7 0 0 0 20 6h-5a1 1 0 0 0 0 2h2.83l-4 4.71l-4.32-2.57a1 1 0 0 0-1.28.22l-5 6a1 1 0 0 0 .13 1.41A1 1 0 0 0 4 18a1 1 0 0 0 .77-.36l4.45-5.34l4.27 2.56a1 1 0 0 0 1.27-.21L19 9.7V12a1 1 0 0 0 2 0V7Z" fill="currentColor"></path></svg>Trending</h3>
<div class="tabx flex lsn p-6 m-10 tac tab r4">
<span class="active f1 r3 cp" data-tab='PopularPosts'>Mingguan</span>
<span class="f1 r3 cp" data-tab='PopularPosts'>Bulanan</span>
<span class="f1 r3 cp" data-tab='PopularPosts'>Semua</span>
</div>
</b:if>

<script>
          $(document).ready(function(){

    $(&#39;.tabx span&#39;).click(function(){
        var tab_id = $(this).attr(&#39;data-tab&#39;);

        $(&#39;.tabx span&#39;).removeClass(&#39;active&#39;);
        $(&#39;.PopularPosts&#39;).removeClass(&#39;current&#39;);

        $(this).addClass(&#39;active&#39;);
        $(&quot;#&quot;+tab_id).addClass(&#39;current&#39;);
    })

})
</script>