JSFiddle - React, Tailwind, and code Playground

HTML

<div class="custom">
  <div data-id="1" class="custom-cell"></div>
  <div data-id="2" class="custom-cell"></div>
  <div data-id="3" class="custom-cell"></div>
  <div data-id="4" class="custom-cell"></div>
  <div data-id="5" class="custom-cell"></div>
  <div data-id="6" class="custom-cell"></div>
  <div data-id="7" class="custom-cell"></div>
  <div data-id="8" class="custom-cell"></div>
  <div data-id="9" class="custom-cell"></div>
  <div data-id="10" class="custom-cell"></div>
  <div data-id="11" class="custom-cell"></div>
  <div data-id="12" class="custom-cell"></div>
  <div data-id="13" class="custom-cell"></div>
  <div data-id="14" class="custom-cell"></div>
  <div data-id="15" class="custom-cell"></div>
  <div data-id="16" class="custom-cell"></div>
</div>

CSS

.custom {
  display: table;
  margin: 15% auto 15% auto;
  width: 75%;
  max-height: 75%;
  background-color: aqua;
  border: 4px double black;
}

.custom-cell {
  position: relative;
  width: 25%;
  float: left;
  height: 25%;
  padding-bottom: 25%;
  background: radial-gradient(red, black)
}

.custom-cell-clicked {
  position: relative;
  width: 25%;
  float: left;
  height: 25%;
  padding-bottom: 25%;
  background: radial-gradient(black, red)
}

JavaScript

$(function() {
  var isMouseDown = false;
  var clickedCell;
  var mouseMove;
  var oldMouseMove;
  
  $(".custom-cell").mousedown(function() {
    isMouseDown = true;
    
    clickedCell = $(this).data("id");
    
    $(this).toggleClass("custom-cell-clicked");
    return false; // prevent text selection
  }).mouseover(function(event) {
    if (isMouseDown) {
    
    oldMouseMove = mouseMove;
    
    if(clickedCell == ($(this).data("id")-1) || clickedCell == ($(this).data("id")+1)) {
    	mouseMove = "horisontal";
    } else {
    	mouseMove = "vertical";
    }
    
    if(oldMouseMove == undefined || oldMouseMove == mouseMove) {
      $(this).toggleClass("custom-cell-clicked");
    } else {
    	isMouseDown = false;
    }
   
    	clickedCell = $(this).data("id");
    	
      
      
    }
  }).on("selectstart", function() {
    return false; // prevent text selection in IE
  });

  $(document).mouseup(function() {
    isMouseDown = false;
    mouseMove = undefined;
    oldMouseMove = undefined;
    clickedCell = undefined;
  });
});