JSFiddle - React, Tailwind, and code Playground

by anton4ept

HTML

<div id="blockcolor">
  <div id="first">&#10027;</div>
  <div id="second">&#10052;</div>
  <div id="third">&#10027;</div>
  <div id="four">&#10052;</div>
  <div id="fife">&#10027;</div>
  <div id="six">&#10052;</div>
</div>

CSS

.bordered {
  outline: 1px solid red;
}

JavaScript

var blocks = document.getElementById("blockcolor");

blocks.addEventListener("click", clickHandler);

function clickHandler(e) {
	var target = e.target;
  
  var bordered = blocks.querySelectorAll(".bordered");
  console.log(e);
  
  for (var i=0; i < bordered.length; i++) {
  	bordered[i].className="";
  }
  if (target.nextElementSibling)
  	target.nextElementSibling.className="bordered";
  if (target.previousElementSibling)
  	target.previousElementSibling.className="bordered";
  
}