JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fd">
  <div class="wrapper" id="slider">
    <div class="tabs">
      <ul>
        <li data-filter="*">All</li>
        <li data-filter="graphics">graphics</li>
        <li data-filter="love">Filter2</li>
        <li data-filter="coffee">Filter3</li>
      </ul>
    </div>
    <div class="entities">
      <ul>
        <li class="love">Love1</li>
        <li class="graphics">Graphics1</li>
        <li class="coffee">Coffee1</li>
        <li class="love">Love2</li>
        <li class="graphics">Graphics1</li>
        <li class="coffee">Coffee2</li>
      </ul>
    </div>
  </div>
  <div class="wrapper" id="conform">
    <div class="tabs">
      <ul>
        <li data-filter="*">All</li>
        <li data-filter="graphics">graphics</li>
        <li data-filter="love">Filter2</li>
        <li data-filter="coffee">Filter3</li>
      </ul>
    </div>
    <div class="entities">
      <ul>
        <li class="love">Love1</li>
        <li class="graphics">Graphics1</li>
        <li class="coffee">Coffee1</li>
        <li class="love">Love2</li>
        <li class="graphics">Graphics1</li>
        <li class="coffee">Coffee2</li>
      </ul>
    </div>
  </div>
</div>

CSS

.hidden {
  display: none;
}

JavaScript

(function() {


  window.selectPlugin = selectPlugin;

  function selectPlugin() {
    var filters = null,
      entities = null;

    function setSelectors(cssFiltersClass, cssEntitiesClass) {
      filters = document.querySelectorAll(cssFiltersClass);
      entities = document.querySelectorAll(cssEntitiesClass);
    }

    function run() {
      filters.forEach(filterForEach); // фильтр обработки событий по клику на .tabs
      function filterForEach(item) {
        item.addEventListener('click', eventListener); //функция для работы с объектом обработчик событий по click
      }

      function eventListener(event) {
        var filterName = event.target.getAttribute("data-filter"); // присваивает в переменную атрибут data-filter

        entities.forEach(function(entity) { // сама логика работы обработчика
          if (filterName == '*' || entity.classList.contains(filterName)) {
            entity.classList.remove('hidden');
          } else {
            entity.classList.add('hidden');
          }
        })
      }
    }


    return {
      setSelectors: setSelectors,
      run: run
    };
  }
}())


var selector1 = new window.selectPlugin();
selector1.setSelectors("#slider .tabs", "#slider .entities ul li");
selector1.run();
var selector2 = new window.selectPlugin();
selector2.setSelectors("#conform .tabs", "#conform .entities ul li");
selector2.run();