Filter on jQuery

filter.html

<div class="filter">
  <div class="filter__nav">
    <ul class="filter__nav-group" data-filter-group="group">
      <li><a href="#" class="button" data-filter=".group1">Группа1</a></li>
      <li><a href="#" class="button" data-filter=".group2">Группа2</a></li>
      <li><a href="#" class="button" data-filter=".group3">Группа3</a></li>
    </ul>
    <ul class="filter__nav-group" data-filter-group="season">
      <li><a href="#" class="button" data-filter=".winter">Зима</a></li>
      <li><a href="#" class="button" data-filter=".summer">Лето</a></li>
    </ul>
    <ul>
      <li>
        <a href="#" class="reset">Сбросить</a>
      </li>
    </ul>
  </div>
  
  <div class="filter__content">
    <div class="nothing">Ничего нет</div>
    <div class="filter__content-item group1 winter">Зима</div>
    <div class="filter__content-item group2 winter">Зима</div>
    <div class="filter__content-item group1 summer">Лето</div>
    <div class="filter__content-item group2 summer">Лето</div>
  </div>
</div>

filter.js

$(document).ready(function(){
    
  function concatValues(obj) {
		var value = '';
		for ( var prop in obj ) {
			value += obj[ prop ];
		}
		return value;
	}
  
  let $grid = $('.filter__content'),
	$item = $grid.find('.filter__content-item'),
	filterButtons = $('.filter__nav'),
	filters = {},
	filterValue = '',
	filtered = '';
  
  $('.filter__nav-group').each(function(i, buttonGroup) {
		var $buttonGroup = $(buttonGroup);
		$buttonGroup.on('click', '.button', function(event) {
      $('.all-button').removeClass('active');
			$buttonGroup.find('.active').removeClass('active');
			var $button = $(event.currentTarget);
			$button.addClass('active');
		});
	});
  
  filterButtons.on('click','.button', function(e){
		e.preventDefault();
		let $button = $(e.currentTarget);
		let $buttonGroup = $button.parents('.filter__nav-group');
		let filterGroup = $buttonGroup.attr('data-filter-group');
		filters[filterGroup] = $button.attr('data-filter');
		filterValue = concatValues(filters);
		filtered = $item.filter(filterValue);
		let length = filtered.length;
		if (length == 0) {
			$('.nothing').show();
			$('.nothing').css('display','flex');
		} else {
			$('.nothing').hide();
		}
    $item.hide();
    filtered.show();
	});
  
  $('.reset').click(function(e){
    e.preventDefault();
    filters = {};
    $item.show();
    $('.button').removeClass('active');
    $('.nothing').hide();
  });
});