JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div id="btn1" class="btn">test</div>
<div id="btn2" class="btn">test</div>
<div id="btn3" class="btn">test</div>
<div id="btn4" class="btn">test</div>
<div id="btn5" class="btn">test</div>

CSS

.rouge{
	background-color:red;
}
.vert{
	background-color:green;
}

JavaScript

let btns = document.getElementsByClassName("btn");

for (let i = 0; i < btns.length; i++) {
 if ( localStorage.getItem(btns[i].id) ) {
    btns[i].classList.add(localStorage.getItem(btns[i].id));
  } else {
    btns[i].classList.add("rouge");
  }
  document.getElementById("btn" + (i+1)).addEventListener("click", changeCouleur, false);
}

function changeCouleur(){
  this.classList.toggle("rouge");
  this.classList.toggle("vert");
  localStorage.setItem(this.id, this.classList.contains("rouge") ? "rouge" : "vert");
}