JSFiddle - React, Tailwind, and code Playground

by Vaibhav Katole

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<button type="button" id="ncaabfilter" class="ncaabfilter btn btn-xs btn-default btn-danger">NCAAB</button> 
<button type="button" id="ncaaffilter" class="ncaaffilter btn btn-xs btn-default btn-danger">NCAAF</button> 
<button type="button" id="nbafilter" class="nbafilter btn btn-xs btn-default btn-danger">NBA</button> 
<button type="button" id="nflfilter" class="nflfilter btn btn-xs btn-default btn-danger">NFL</button>
<div class="ncaaf">
  NCAAF Game 1
</div>
<div class="nfl">
  NFL Game 1
</div>
<div class="nba">
  NBA Game 1
</div>
<div class="ncaab">
  NCAAB Game 1
</div>
<div class="ncaaf">
  NCAAF Game 2
</div>
<div class="nfl">
  NFL Game 2
</div>
<div class="nba">
  NBA Game 2
</div>
<div class="ncaab">
  NCAAB Game 2
</div>

JavaScript

$('.btn').click(function(){
    var button = $(this);
    displaySelectedItems(button);
  });
  
  function displaySelectedItems(button) {
  	var contents = button.text().trim().toLowerCase();
    console.log('contents:' + contents);
    console.log('button has class before:' + button.hasClass('btn-danger'));
    if (button.hasClass('btn-danger')) {
    	$('.' + contents).hide();
    } else {
    	$('.' + contents).show();
    }
    $('.'+ contents +'filter').toggleClass('btn-default btn-danger');
    console.log('button has class after:' + button.hasClass('btn-danger'));
    localStorage.setItem(button.attr('id'), button.hasClass('btn-danger'));
  }
  
  $('.btn').each(function(index,element) {
  	var elemID = $(this).attr('id');
    var isBtnSelected = localStorage.getItem(elemID) == undefined ? $(this).hasClass('btn-danger') : localStorage.getItem(elemID);
    if (isBtsSelected == true) {
    	$(this).addClass('btn-danger');
    } else {
    	$(this).removeClass('btn-danger');
    }
    displaySelectedItems($(this));
  });