JSFiddle - React, Tailwind, and code Playground

HTML

<div id="postings">
    <div class="contents">sdhgsdf</div>
    <div class="contents">dsfh</div>
    <div class="contents">fdhs</div>
    <div class="contents">mfhb</div>
    <div class="contents">mbn</div>
    <div class="contents">ery</div>
    <div class="contents">sdfh</div>
    <div class="contents">ertye</div>
    <div class="contents">aerhgdf</div>
    <div class="contents">234weg</div>
    <div class="contents">asgcx</div>
    <div class="contents">zbcvzncvn</div>
</div>

JavaScript

jQuery.fn.outerHTML = function() {
  return jQuery('<div />').append(this.eq(0).clone()).html();
};

wrappings = [];
elems = 0; // from 1 to 4
count = 0;
$.each($('div.contents'), function (index, elem) {
    if (elems == 4) {
        elems = 0;
        count++;
    }
    console.log('count:' + count);
    if (! wrappings[count]) {
        wrappings[count] = []
    }
    wrappings[count].push($(elem).outerHTML());
    
    elems++;
});
console.log(wrappings);
$.each(wrappings, function (index, w) {
    wrappings[index] = w.join('');
});

bigHTML = '';
$.each(wrappings, function (index, w) {
    bigHTML += '<div id="newWrap_' + index + '">';
    bigHTML += w;
    bigHTML += '</div>'
});
$('div#postings').html(bigHTML);