JSFiddle - React, Tailwind, and code Playground

by Kamruz Jaman

HTML

<ul class="tree">
    <li id="section">Header1 </li>
    <li> 1</li>
    <li> 2</li>
    <li> 3</li>
    <li id="section"> Header 2</li>
    <li> 4</li>
    <li> 5</li>
    <li> 6</li>
    <li id="section"> Header 3 </li>
    <li> 7</li>
    <li> 8</li>
    <li> 9</li>
    <li id="section">Header1 </li>
    <li> 1</li>
    <li> 2</li>
    <li> 3</li>
    <li id="section"> Header 2</li>
    <li> 4</li>
    <li> 5</li>
    <li> 6</li>
    <li id="section"> Header 3 </li>
    <li> 7</li>
    <li> 8</li>
    <li> 9</li>
</ul>

CSS

.group1 {
    color:red;
}

.group2 {
    color:blue;
}

.group3 {
    color:green;
}

JavaScript

var listItems = $('.tree li');
var group = 0;
for (var i = 0; i < listItems.length; i++) { //Note: You may use jquery iterator also
    var item = $(listItems[i]);
    if (item.attr('id') === 'section') {
        group++;
    }
    switch(group) {
        case 1:
            item.addClass('group1');
        break;

        case 2:
            item.addClass('group2');
        break;

        case 3:
            item.addClass('group3');
        break;
    }
}