JSFiddle - React, Tailwind, and code Playground

by Satpal Singh

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div data-id="1" class="box p001 mix ">Div 1</div>
<div data-id="2" class="box p002 mix">Div 2</div>

CSS

div.box {
  height: auto;
  width: 200px;
  color: #1c1c1c;
  font-size: 20px;
  padding: 20px;
  border-radius: 10px;
  margin: 0 0 20px 0;
}

div.box.p001 {
  border: 5px solid #7ae6b2;
}

div.box.p001.selected {
  background: #7ae6b2;
}

div.box.p002 {
  border: 5px solid #66c1dc;
}

div.box.p002.selected {
  background: #66c1dc;
}

JavaScript

$(function() {
  $('.mix').click(function() {
    $(this).toggleClass('selected')
    window.localStorage.setItem('test' + this.dataset.id, $(this).hasClass('selected'));
  });

  $('.mix').each(function() {
    var id = 'test' + this.dataset.id;
    if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
      $(this).addClass('selected');
    }
  })
});