JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<table class="grid">
  <tr>
    <td class="can-edit">1</td>
    <td class="can-edit">2</td>
    <td class="">3</td>
    <td class="">4</td>
    <td class="can-edit">5</td>
    <td class="">6</td>
    <td class="can-edit">7</td>
  </tr>
  <tr>
    <td class="">8</td>
    <td class="can-edit">9</td>
    <td class="can-edit">10</td>
    <td class="">11</td>
    <td class="can-edit">12</td>
    <td class="">13</td>
    <td class="can-edit">14</td>
  </tr>
</table>

CSS

.grid {
  width: 100%;
}

.can-edit {
  background: rgba(0, 128, 255, 0.2);
  cursor: pointer;
}

.prev {
  border: 2px dashed red;
}

.next {
  border: 2px dashed green;
}

JavaScript

var $grid = $('.grid');

$grid.on('click', '.can-edit', function() {
	var $current = $(this);

	var prevElement = null;
	var nextElement = null;

	var previous = null;
	var currentFound = false;

	$grid.find('.can-edit').removeClass('next').removeClass('prev');

	$grid.find('.can-edit').each(function() {
		if ($(this).is($current)) {
			prevElement = previous;
			currentFound = true;
		} else if (currentFound) {
			nextElement = $(this);
			currentFound = false;
		}
    previous = $(this);
	});
  
  console.log(prevElement, nextElement);
  
  prevElement && prevElement.addClass('prev');
  nextElement && nextElement.addClass('next');
});