Greeting, stack overflow community. I am trying to create three-stage filter tag list and its working, the problem i can't figure out is how to make visible which tag is currently selected.

The futures I can't currently understand is how to set "All" tag in every list by default and enable the possibility to show selected tag in every list, now it selects only 1 from all 3 lists.

**HTML**

```
<h2>Composition</h2> 
<ul class="filter" id="composition">
    <li><a data-value="all">All</a> </li>
    <li><a data-value="landscape">Landscape</a></li> 
    <li><a data-value="portait">Portait</a> </li>
    <li><a data-value="square">Square</a> </li>
</ul>

<h2>People</h2>
<ul class="filter" id="people">
    <li><a data-value="all">All</a> </li>
    <li><a data-value="people">People</a></li> 
    <li><a data-value="nopeople">No People</a></li>
</ul>

<h2>Theme</h2>
<ul class="filter" id="theme">
    <li><a data-value="all">All</a> </li>
    <li><a data-value="Nature">Nature</a></li> 
    <li><a data-value="Fashion">Fashion</a></li> 
    <li><a data-value="Mountains">Mountains</a></li> 
    <li><a data-value="Sea">Sea</a></li>    
</ul>

<h2>Data to filter</h2>
<ul> 
    <li class="item landscape people Nature">landscape people Nature</li> 
    <li class="item portait nopeople Fashion">portait nopeople Fashion</li> 
    <li class="item landscape people Mountains">landscape people Mountains</li> 
    <li class="item portait people Sea">portait people Sea</li> 
    <li class="item square people Mountains">square people Mountains</li> 
    <li class="item landscape people Fashion">landscape people Fashion</li> 
    <li class="item square nopeople Sea">square nopeople Sea</li> 
    <li class="item landscape nopeople Mountains">landscape nopeople Mountains</li> 
    <li class="item portait people Fashion">portait people Fashion</li> 
    <li class="item square nopeople Sea">square nopeople Sea</li> 
</ul>

```

**CSS**

```
li a.active {
    color: blue;
}

```

**JavaScript**

```
$("ul.filter li a")
    .on('click', function() { 
        var $this = $(this);
        $this
            .closest('ul')
            .find('a')
            .removeClass('selected');
                $this
            .addClass('selected');

        var selector = [];
        $('ul li a.selected')
            .each(function() {
                var selectedValue = $(this).data('value');
                if (selectedValue !== 'all') {
                    selector.push(selectedValue);
                }
            });
        $(".item")
            .hide();
        if (selector.length) {
            $('.item.'+ selector.join('.')).show();
        } else {
            $(".item")
                .show();
        }
    }); 

    $("ul.filter li a").on('click', function(){
    $("ul.filter li a").removeClass('active');
    $(this).addClass('active');
});

```

Fiddle: <https://jsfiddle.net/22vh08ah/6/>