JSFiddle - React, Tailwind, and code Playground
HTML
<div class="l-logo-window">
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
<img alt="X" src="http://dummyimage.com/50x50/000/0815cc.png&text=TEST" />
</div>
CSS
div.l-logo-window div {
clear: both;
border: 1px solid red;
}
img {
margin-right: 5px;
}
JavaScript
$('.l-logo-window > img:nth-child(4n+4)').each(function (i, v) {
$(this).prevAll('img').addBack().wrapAll('<div/>');
if (i % 2 !== 0) { // ever other one wrap another div
$('.l-logo-window > div:last').prev().addBack().wrapAll('<div/>');
}
});
if($('.l-logo-window > div:last > div').length == 0){
$('.l-logo-window > div:last > img').wrapAll('<div/>');
$('.l-logo-window > img').appendTo('.l-logo-window > div:last').wrapAll('<div/>');
}else{
$('.l-logo-window > img').wrapAll('<div/>').parent().wrap('<div/>');
}