JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
		
	</div>

CSS

html {
	height: 100%;
}

body {
	margin: 0;
	height: 100%;
}

.wrapper {
	height: 100%;
	width: 100%;
}

.child {
	background: red;
	display: inline-block;
	vertical-align: top;
}

.child:hover {
	background: blue;
}

JavaScript

function myFunction() {
    var square = 100;
    var squareSize = parseInt(square);
    if (square != null) {
    	var wrapper = $('.wrapper').width();
    	var wrapperHeight = $('.wrapper').height();
    	var a = (wrapper / squareSize |0) * (wrapperHeight / squareSize |0);	
        var items = wrapper / squareSize |0;
        for (var i = 0; i < a; i++) {
          $('.wrapper').append('<div class="child">' + i +'<div>');
          $('.child').css({
             width: squareSize,
             height: squareSize
         });
      };
}
}

myFunction();

function adjacentItems(index){
    var $parent = $('.wrapper'),
        $child = $('.child');
    
    var count = $child.length;
    
    // сколько элементов в линии
    var xItems = Math.floor($parent.width() / $child.width()),
        yItems = Math.floor($parent.height() / $child.height());
    
    // шаг вправо
	var $right = null,
        right = index + 1;
    
    if (right <= count && right % xItems !== 0) {
    	$right = $child.eq(right)
    }
    
    // шаг влево
	var $left = null,
        left = index - 1;
    
    if (left >= 0 && index % xItems !== 0) {
    	$left = $child.eq(left)
    }
    
    // шаг вверх
	var $top = null,
        top = index - xItems;
    
    if (top >= 0 && index % xItems !== 0) {
    	$top = $child.eq(top)
    }
    
    // шаг вниз
	var $bottom = null,
        bottom = index + xItems;
    
    if (bottom <= count && bottom - 1 % xItems !== 0) {
    	$bottom = $child.eq(bottom)
    }
    
    // массив элементов
    var data = [];
    
    // собственно, если он есть, то записываем в массив.
    if ($right) {
    	data.push($right);
    }
    if ($left) {
    	data.push($left);
    }
    if ($top) {
    	data.push($top);
    }
    if (bottom) {
    	data.push($bottom);
    }
    return data;
}

$('.wrapper').on('click', '.child', function() {
        // получаем список эелемнтов
	var $items = adjacentItems($(this).index());
    // перебираем массив
   ...