JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div class="page_channel">
    <div class="sub title">Content1</div>
    <div class="sub title">Content2</div>
    <div class="sub title">Content3</div>
    <div class="sub">Content4</div>
    <div class="sub title">Content5</div>
    <div id="results"></div>
</div>

CSS

.new {
    border: solid 1px #ddd;
    padding: 5px;
}

JavaScript

var divs = $(".page_channel .sub");
for (var i = 0; i < divs.length; i += 2) {
    var res = [];
    var counterTitle = 0
    divs.slice(i, i + 2).wrapAll("<div class='new'></div>").each(function (index) {
        counterTitle = $(this).hasClass("title") ? counterTitle + 1 : counterTitle;
        res[index] = $(this).text();

    });
    
    $("#results").append("Dvis with content :[" + res + "] have .title class -> " + counterTitle + " times" + "<br/>");
    i = i - 1;

    console.log(res);
    console.log(counterTitle);
}