JSFiddle - React, Tailwind, and code Playground

by RevConcept

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div>
        <h3>List One</h3>
        <div class="item">1Content</div>
        <div class="item">1Content</div>
        <div class="item">1Content</div>
        <div class="item">1Content</div>
        <div class="item">1Content</div>
        <div class="item">1Content</div>
        <div class="item">1Content</div>
</div>

<div>
        <h3>List Two</h3>
        <div class="item">2Content</div>
        <div class="item">2Content</div>
        <div class="item">2Content</div>
        <div class="item">2Content</div>
        <div class="item">2Content</div>
        <div class="item">2Content</div>
</div>

CSS

.new { border-bottom: solid 1px #ddd; padding: 5px; }
h3 {font-weight: bold; margin-top: 10px;}

JavaScript

var divs = $("div > .item");
    for(var i = 0; i < divs.length; i+=3) {
      divs.slice(i, i+3).wrapAll("<div class='new'></div>");
    }