JSFiddle - React, Tailwind, and code Playground

by robinhood777

HTML

<div class="category">1</div>
  <div class="category">2</div>
  <div class="category">3</div>
  <div class="category">4</div>
  <div class="category">5</div>

CSS

.category {
  display: none;
}

JavaScript

const countRefresh = localStorage.getItem('refreshTurn');
  if(countRefresh != null){
	  foo(parseInt(countRefresh) - 1);
	  switch(countRefresh) {
		  case "1":
			localStorage.setItem('refreshTurn', '2');
			break;
		  case "2":
			localStorage.setItem('refreshTurn', '3');
			break;
		  case "3":
			localStorage.setItem('refreshTurn', '4');
			break;
		  case "4":
			localStorage.setItem('refreshTurn', '5');
			break;
		  case "5":
			localStorage.setItem('refreshTurn', '1');
			break;
		  default:
			localStorage.setItem('refreshTurn', '1');
		}
  } else {
    foo(0);
    localStorage.setItem('refreshTurn', '1');
  }
  function foo(index){
	  $(document).ready(function () {
		let divs = document.querySelectorAll(".category");
		console.log(index);
		$(divs[index]).show()
	  });
  }