JSFiddle - React, Tailwind, and code Playground
JavaScript
function createBlocks(){
const cont1 = document.querySelectorAll('.wrap1');
const cont2 = document.querySelectorAll('.wrap2');
const cont3 = document.querySelectorAll('.wrap3');
const ele1 = getCats(1);
const ele2 = getCats(2);
const ele3 = getCats(3);
const elem1 = ele1.slice(0, 9);
const elem2 = ele1.slice(9, 18);
const elem3 = ele1.slice(18, 27);
const elem4 = ele1.slice(27, 36);
const elem5 = ele1.slice(36, 45);
const elem6 = ele2.slice(0, 9);
const elem7 = ele2.slice(9, 18);
const elem8 = ele2.slice(18, 27);
const elem9 = ele2.slice(27, 36);
const elem10 = ele2.slice(36, 45);
const elem11 = ele3.slice(0, 9);
const elem12 = ele3.slice(9, 18);
const elem13 = ele3.slice(18, 27);
const elem14 = ele3.slice(27, 36);
const elem15 = ele3.slice(36, 45);
for (let i = 0; i < elem1.length; i ++) {
cont1[0].appendChild(elem1[i]);
}
for (let i = 0; i < elem2.length; i ++) {
cont1[1].appendChild(elem2[i]);
}
for (let i = 0; i < elem3.length; i ++) {
cont1[2].appendChild(elem3[i]);
}
for (let i = 0; i < elem4.length; i ++) {
cont1[3].appendChild(elem4[i]);
}
for (let i = 0; i < elem5.length; i ++) {
cont1[4].appendChild(elem5[i]);
}
for (let i = 0; i < elem6.length; i ++) {
cont2[0].appendChild(elem6[i]);
}
for (let i = 0; i < elem7.length; i ++) {
cont2[1].appendChild(elem7[i]);
}
for (let i = 0; i < elem8.length; i ++) {
cont2[2].appendChild(elem8[i]);
}
for (let i = 0; i < elem9.length; i ++) {
cont2[3].appendChild(elem9[i]);
}
for (let i = 0; i < elem10.length; i ++) {
cont2[4].appendChild(elem10[i]);
}
for (let i = 0; i < elem11.length; i ++) {
cont3[0].appendChild(elem11[i]);
}
for (let i = 0; i < elem12.length; i ++) {
cont3[1].appendChild(elem12[i]);
}
for (let i = 0; i < elem13.length; i ++) {
cont3[2].appendChild(elem13[i]);
...