JSFiddle - React, Tailwind, and code Playground

by Dmitri Ganenco

HTML

<section data-sport="soccer"></section>
<section data-sport="basketball"></section>
<section data-sport="all"></section>

<div id="sportsModal">
    <div id="sportsModal-group">
      <button onclick="sportRemove()" class="sportsModal-sport">All</button>
      <button onclick="sportExecute('soccer')" class="sportsModal-sport">Soccer</button>
      <button onclick="sportExecute('futsal')" class="sportsModal-sport">Futsal</button>
      <button onclick="sportExecute('basketball')" class="sportsModal-sport">Basketball</button>
      <button onclick="sportRemove()" class="sportsModal-sport">Other</button>
    </div>
</div>

CSS

.sportsModal-sport {
    margin-bottom: 10px;
}

JavaScript

function sportFunnel() {
  $("#sportModal").show();
}

function sportExecute(n) {
debugger;
  localStorage.removeItem("stSport");
  localStorage.setItem("stSport", n);
  var vstSports = localStorage.getItem("stSport");
  $("*[data-sport]").hide();
  var dataSport = "*[data-sport='" + vstSports + "']";
  var dataSportAll = "*[data-sport='all']";
  $(dataSportAll).show();
  $(dataSport).show();
}

$(document).ready( function() {

    if(!localStorage.getItem("stSport")){
        sportFunnel();
        var vstSports = localStorage.getItem("stSport");
    }
    else {
        var stSportChosen = localStorage.getItem("stSport"); 
        $("*[data-sport]").hide();
        var dataSport = "*[data-sport='" + stSportChosen + "']";
        var dataSportAll = "*[data-sport='all']";
        $(dataSportAll).show();
        $(dataSport).show();
    }
});

function sportRemove() {
  localStorage.removeItem("stSport");
  var vstSportsValue = localStorage.getItem("stSport");
  sportFunnel();
};