JSFiddle - React, Tailwind, and code Playground

by veer_vin

HTML

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="content">
  <div class="test">Select Me as 1</div>
  <div class="test">Select Me as 2</div>
  <div class="test">Select Me as 3</div>
  <div class="test">Select Me as 4</div>
</div>

<p>After Selecting one of the above text refersh the page.</p>
<br>
<a id="check">Click here to highligh previous text</a>

CSS

div { cursor:pointer; padding:10px;}
.fcurrent {background-color:green; display:inline-block;}
#check {cursor:pointer; padding:10px;}
p {padding:10px;}

JavaScript

$(document).on('click','#content div',function(e){
  //$(this).addClass("fcurrent");
  $(this).toggleClass('fcurrent').siblings().removeClass('fcurrent');
  var cls = $(this).attr('class');
  var index = $(this).index() + 1;
  alert(index);
  if (window.sessionStorage) {
    sessionStorage.setItem("cls", cls);
     sessionStorage.setItem("index", index);
    alert(cls);
    
  }
})

$('#check').click(function () {
	var cls = sessionStorage.getItem("cls");
  var index = sessionStorage.getItem("index");
  $('#content div:nth-child('+index+')').addClass("fcurrent");
  alert(cls);  
});

//$( document ).ready(function() {
	//var index = sessionStorage.getItem("index");
  //$('#content div:nth-child('+index+')').addClass("fcurrent");
  //alert(cls); 
//});