JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div id="products" >
   <div class="line">
      <div id="Album2">2</div>
      <div id="Album1">1</div>
      <div id="Album10">10</div>
      <div id="Album16">16</div>
   </div>
   <div class="line">
      <div id="Album9">9</div>
      <div id="Album3">3</div>
      <div id="Album4">4</div>
      <div id="Album7">7</div>
   </div>
   <div class="line">
      <div id="Album5">5</div>
      <div id="Album11">11</div>
      <div id="Album6">6</div>
      <div id="Album13">13</div>
   </div>
   <div class="line">
      <div id="Album8">8</div>
      <div id="Album14">14</div>
      <div id="Album12">12</div>
      <div id="Album15">15</div>
   </div>
</div>

JavaScript

var arr = [],
    lines = $('.line'),
    lines_len = lines.length,
    divs = lines.children('div'),
    divs_len = divs.length,
    divs_per_line = divs_len / lines_len,
    i = 0,
    j = 0,
    frag = $('<div/>'),
    clone;

divs.each(function() {
    arr.push($(this).attr('id'));
});

arr.sort(function(a, b) {
    return a.slice(5, 7) - b.slice(5, 7);
});

for (; j < lines_len; j++) {
    clone = frag.clone();
    for (; i < divs_len; i++) {
        $("#" + arr[i]).appendTo(clone);
    }
    lines.eq(j).html('').append(clone.children());
}