Isotope - Dropdown filter + tag 'clone' for delete 'data-filter'


I modified an isotope filter to work with the dropdown menu and a prototype of "tag" capable of eliminating data-filter on multiple data-filter-group.
<!--Filter button dropdown-->
<li class="location location-nav">
    <div class="dropdown space-dropdown">
        <div class="filterstyle filterstyle-text dropdown-toggle button-topnav btn-select" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">location</div>
            <div class="dropdown-menu" id="location" aria-labelledby="dropdownMenuButton">
                <div class="option-combo location" id="location">
                    <div class="filter option-set button-group" data-filter-group="location">
                        <a class="dropdown-item filter-dropdown">
                            <button class="button all is-checked" data-filter="">Cancella</button>
                        </a>
                        <a class="dropdown-item filter-dropdown">
                            <button class="button location spiaggia" data-filter=".spiaggia">Spiaggia</button>
                        </a>
                        <a class="dropdown-item filter-dropdown">
                            <button class="button location mare" data-filter=".mare">Mare</button>
                        </a>
                        <a class="dropdown-item filter-dropdown">
                            <button class="button location fiume-lago" data-filter=".fiume-lago">Fiume Laghetto</button>
                        </a>
                        <a class="dropdown-item filter-dropdown">
                            <button class="button location fiume-lago" data-filter=".piccolo-laghetto">Laghetto</button>
                        </a>
                    </div>
                </div>
          </div>
    </div>
</li>
<p id="filter-display">
  <button class="button location spiaggia active clone" data-filter=".spiaggia" id="clone1">Spiaggia</button>
<a onclick="clearAll();" id="reset-filters" class="pull-right filter-btn">Cancella tutto</a><span class="filter-label data-counter pull-right">&nbsp;</span></p>

Thats' the problem:

  • If i click on "tag" the url hash does not automatically update to delete the data-filter
  • The label of "tag" don't update correctly:
  • All elements must be dynamic, if I click on the dropdown or on a "tag" it changes automatically
  • Possibility to insert extra filters after we add the editing

This is my code
https://jsfiddle.net/marcogattoo/54jeybL2/4/

Optimal situation:
I make click on dropdown > The tag is active.
I make click on tag > The tag is delete and "data-filter" and url-hash is clear.
I make click on dropdown (another voice is already active) > Only one selected is active from goup of data-filter-group

Can anyone tell me how to integrate and make these implementations work?

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum