JSFiddle - React, Tailwind, and code Playground

by Alexey Demin

HTML

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

.box {
  width: 18px;
  height: 18px;
  border: 1px solid red;
  background-color: grey;
}

.life {
  background-color: green;
}

JavaScript

$("div.container").on("click", function(e) {
	
  var $elem = $(e.target),
    $next = $elem.next(),
    $prev = $elem.prev();
    if($next.length){
    	$next.addClass("life");
    }
    if($prev.length){
    	$prev.addClass("life");
    }
    $elem.addClass("life");
});