Filter by posts within a single page

Developer help
4

Apellus, hi!

I got the following result. Initially loaded correctly, but after clicking on the first filter (any), the desired styles are disabled. I absolutely did something wrong, but I can’t figure out what it was.

Current version:

Webpage — https://www.edt.im/shop/, check it, please.
HBS — tag-shop-2.hbs — Yandex.Disk

Filter:

<ul class="nav">
        <li><a class="posters" onclick="show('post-feed-posters'); hide('post-feed','post-feed-icons');" href="#">Posters</a></li>
        <li><a class="icons" onclick="show('post-feed-icons'); hide('post-feed','post-feed-posters');" href="#">Icons</a></li>
        <li><a class="post-feed" onclick="show('post-feed'); hide('post-feed-icons','post-feed-posters');" href="#">All</a></li>
</ul>

JS for show/hide:

<script>
    function show(elementId) { 
        document.getElementById("post-feed-posters").style.display="none";
        document.getElementById("post-feed-icons").style.display="none";
        document.getElementById("post-feed").style.display="none";
        document.getElementById(elementId).style.display="block";
    }
</script>

Posts fetching:

For posters:

<div id="post-feed-posters" class="row loop">
{{#foreach posts}}
    {{#has tag="#shopPoster"}}
        <div class="col-md-6 col-lg-4 {{#if @first}}first{{/if}} item"></div>
        {{> "loop"}}
    {{/has}}
{{/foreach}}     
</div>

For icons:

<div id="post-feed-icons" class="row loop">
{{#foreach posts}}
    {{#has tag="#shopIcons"}}
        <div class="col-md-6 col-lg-4 {{#if @first}}first{{/if}} item"></div>
        {{> "loop"}}
    {{/has}}
{{/foreach}}     
</div>

All posts:

<div id="post-feed" class="row loop">
    {{#foreach posts}}
        <div class="col-md-6 col-lg-4 {{#if @first}}first{{/if}} item">
            {{> "loop"}}
        </div>
    {{/foreach}}
</div>