JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container"> 
    <div id="1" class="row">Highlighted</div>
    <div id="2" class="row"></div>
    <div id="3" class="row hidden">I shouldn't be highlighted</div>
    <div id="4" class="row"></div>
    <div id="5" class="row">Highlighted</div>
    <div id="6" class="row"></div>
    <div id="7" class="row hidden">I shouldn't be highlighted</div>
    <div id="8" class="row"></div>
    <div id="9" class="row">Highlighted</div>
    <div id="10" class="row"></div>
    <div id="11" class="row"></div>
</div>
<div class="container"> 
    <div id="1" class="row">Highlighted</div>
    <div id="2" class="row"></div>
    <div id="3" class="row "></div>
    <div id="4" class="row">Highlighted</div>
    <div id="5" class="row"></div>
    <div id="6" class="row"></div>
    <div id="7" class="row">Highlighted</div>
    <div id="8" class="row"></div>
    <div id="9" class="row"></div>
    <div id="10" class="row">Highlighted</div>
    <div id="11" class="row"></div>
</div>
<button id="test1">Test 1 :nth and :visable</button>
<button id="test2">Test 2 :nth and :visable</button>
<button id="reset">Reset</button>

CSS

.container {float:left;}
.row { display:block; border: 1px solid black; padding:10px; width:100px;}
.row.odd {border: 2px dotted red;background-color:yellow;}
.hidden {display:none;}

JavaScript

$("#test1").click(function() {
    reset();    
    $('.row:visible').each(function(idx) {
        $(this).toggleClass('odd',(idx%2 == 0));
    });
    
});

$("#test2").click(function() {
    /* It doesn't like the pseudo-selector for nth-child */
    reset();
    $('.row:visible:nth-child(3n+1)').each(function() {
        var $this = $(this);
        $this.addClass('odd');
        console.log($this);
    });
});

$("#reset").click(reset);

function reset() {
    $('.odd').removeClass('odd');
}