JSFiddle - React, Tailwind, and code Playground

HTML

<div id="reorder" class="ui-sortable">
  <div id="0" class="x clear" style="height: 135px;">0</div>
  <div id="1" class="x" style="height: 93px;">1</div>
  <div id="2" class="x" style="height: 56px;">2</div>
  <div id="3" class="x" style="height: 25px;">3</div>
  <div id="4" class="x" style="height: 124px;">4</div>
  <div id="5" class="x clear" style="height: 46px;">5</div>
  <div id="6" class="x" style="height: 45px;">6</div>
  <div id="7" class="x" style="height: 39px;">7</div>
  <div id="8" class="x" style="height: 96px;">8</div>
  <div id="9" class="x" style="height: 132px;">9</div>
  <div id="10" class="x clear" style="height: 103px;">10</div>
  <div id="11" class="x" style="height: 34px;">11</div>
  <div id="12" class="x" style="height: 36px;">12</div>
  <div id="13" class="x" style="height: 133px;">13</div>
  <div id="14" class="x" style="height: 128px;">14</div>
  <div id="15" class="x clear" style="height: 73px;">15</div>
  <div id="16" class="x" style="height: 72px;">16</div>
  <div id="17" class="x" style="height: 39px;">17</div>
  <div id="18" class="x" style="height: 55px;">18</div>
  <div id="19" class="x" style="height: 107px;">19</div>
  <div id="20" class="x clear" style="height: 95px;">20</div>
  <div id="21" class="x" style="height: 53px;">21</div>
  <div id="22" class="x" style="height: 127px;">22</div>
</div>

CSS

.x {
    background: red; padding: 5px; margin: 3px;
    float: left;
    width: 100px;
}
.clear { clear: both; }
.green {
    background: green;
}

JavaScript

$('#reorder').sortable({
        sort: function(event, ui) {
            $('#reorder div.x').removeClass('clear green');
            $('#reorder').children('div.x:nth-child(5n + 1)').addClass('clear green');

        },
        update: function(event, ui) {
            $('#reorder div.x').removeClass('clear green');
            $('#reorder').children('div.x:nth-child(5n + 1)').addClass('clear green');

        }
    });
    $('.reorder').disableSelection();