创建div并添加条件类

Question

var mydiv = document.getElementById("mydiv");
for (var i = 0; i < 4; i++) {
  mydiv.innerHTML += '<div id="div1" class="row myStyle">' + i + '</div>';
  var mydiv1 = $('div#div1');
  for (var j = 0; j < 4; j++) {
    mydiv1[i].innerHTML += '<div id="div2" class="col myStyle">' + i + '</div>';
  }
}

$(".myStyle").click(function($event) {
  $event.stopImmediatePropagation();
  if ($($event.target).hasClass('red')) {
    $($event.target).removeClass('red');
  } else {
    $($event.target).addClass('red');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv"></div>

我必须在4 * 4格式的body标签内创建16个带有白色的div。

然后我需要使用jquery向所有这16个div注册一个通用的click事件。

在点击处理程序中，我需要将执行点击的div的颜色更改为红色，但前提是左侧，右侧，顶部和底部的div为白色。

问题是，我无法识别单击的div的左，右，上和下div。