JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="zone1" data-zone="1">Zone 1</div>
<div class="zone2" data-zone="2">Zone 2</div>
<div class="zone3" data-zone="3">Zone 3</div>
<div class="zone4" data-zone="4">Zone 4</div>
<div class="zone1" data-zone="1">Zone 1</div>
<div class="zone2" data-zone="2">Zone 2</div>
<div class="zone3" data-zone="3">Zone 3</div>
<div class="zone4" data-zone="4">Zone 4</div>

JavaScript

var groupsTop = [];

var getTopGroup = function(top) {
  var group = 1;
  var groupIndex = $.inArray(parseInt(top), groupsTop);
  console.log(groupsTop);
  if (groupIndex == -1) {
  	groupsTop.push(top);
    return groupsTop.length;
  } else {
  	return groupIndex + 1;
  }
};

$('[class^=zone]').each(function() {
	var elem = $(this);
  var x = elem.attr('data-zone');
  var top = 10* x;
  var topGroup = getTopGroup(top);
  elem.attr({
  	'data-top': top,
    'data-bottom': 5 * x,
    'data-left': 3 * x,
    'data-width': 6 * x,
    'data-group-top': topGroup
  });
});