JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div data-tags='helper,newest,one'>
  helper,newest,one
</div>
<div data-tags='week,set,buck'>
  week,set
</div>
<div data-tags='two,three,buck'>
  two,three
</div>

JavaScript

var tags = [];
$('[data-tags]').each(function() {
  var sTags = $(this).data('tags').split(',')
  $(this).data('aTags', sTags)
  $.each(sTags, function() {
    tags.push(this.toString());
  })
})


var unique = tags.filter(function(item, i, ar) {
  return ar.indexOf(item) === i;
});
$.each(unique.sort(), function() {

  var chk = $('<input/>').attr('type', 'checkbox');
  chk.val(this);
  chk.change(function() {
    var $this = $(this);
    var $checks = $('input:checked');
    var sComp = "or"

    if ($checks.length == 0) {
      $('[data-tags]').show();
    } else {

      if (sComp == 'and') {

        $('[data-tags]').each(function() {
          var vis = true;
          var $item = $(this);
          var aTags = $item.data('aTags')
          if (sComp == 'and') {
            $checks.each(function() {
              vis = aTags.indexOf(this.value) != -1;
              return aTags.indexOf(this.value) != -1;
            })
            $item.toggle(vis)
          }

        })

      } else {
      	$('[data-tags]').hide().each(function(){
        	var $item = $(this)
          var matches = 0;
          var aTags = $item.data('aTags');
        	$(':checked').each(function(){
						    matches = matches + (aTags.indexOf(this.value) != -1) ? 1 : 0;    
          })
          $item.toggle(matches!=0)
        })
      
      }


    }



  })
  var lbl = $('<label/>').html(this)
  $('body').append(chk)
  $('body').append(lbl)

})