JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
</div>

CSS

a {
    background-color: blue;
}
.slide {
    background-color: red;
}

JavaScript

$(function() {

    var wrapEveryN = function(n, elements, wrapper) {
       for (var i=0; i< elements.length; i+=n) {
           elements.slice(i,i+n).wrapAll(wrapper);
       }
    }
 
    wrapEveryN( 5, $(".wrapper a"), '<div class="slide"></div>' );
});