JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div class="navigation-block">
  <div class="block-header">
    <h3><span class="icon-grid"></span>Type<span class="counter"></span></h3>
  </div>
  <div class="block-options type">
    <ul>
      <li class="request-for-information">Request for information</li>
      <li class="lack-review">Lack review</li>
      <li class="safety-rounds">Safety rounds</li>
    </ul>
  </div>
</div>
<div class="navigation-block">
  <div class="block-header">
    <h3><span class="icon-grid"></span>Type<span class="counter"></span></h3>
  </div>
  <div class="block-options type">
    <ul>
      <li class="request-for-information">Request for information</li>
      <li class="lack-review">Lack review</li>
      <li class="safety-rounds">Safety rounds</li>
    </ul>
  </div>
</div>

CSS

.counter {
  background-color: #F60;
  color: #FFFFFF;
  width: 20px;
  height: 20px;
  display: inline-block;
}

JavaScript

var filterBtn = $('.block-options ul li');

filterBtn.on('click', function() {
  $(this).toggleClass('active');
});

$('.navigation-block').each(function() {

  var listItems = $(this).find('.block-options ul li');
  //var counter = $(this).find('.block-header .counter');

  listItems.on('click', function() {
    var amount = $(this).parent().find('.active').length;

    $(this).parent().parent().parent().find('.counter').html(amount)
    console.log($(this).parent().find('.active'));
    //counter.html(amount);
  });

});