JSFiddle - React, Tailwind, and code Playground

by Ozren Tkalčec Krznarić

HTML

<section>

    <div class="col">
        <span>1</span> <!-- ODD -->
        <span>2</span> <!-- ODD -->
        <span>3</span> <!-- EVEN-->
        <span>4</span> <!-- ODD-->
        <span>5</span><!-- EVEN-->
    </div>

    <div class="col">
        <span>6</span><!-- EVEN-->
        <span>7</span><!-- ODD-->
        <span>8</span><!-- EVEN-->
    </div>

    <div class="col">
        <span>9</span><!-- ODD -->

    </div>
    <div class="col">
        <span>10</span><!-- EVEN-->
        <span>11</span><!-- ODD-->
    </div>

</section>

JavaScript

$(function() {
    var divs = $("div");
    var current = 0;
    var odd = false;

    var dummy = 0
    while(true) {
        var spansAvailable = false;
        
        $.each(divs, function(idx, div) {
            $found = $(div).find("span").eq(current);
            if($found.length > 0) {
                console.log("spansAvailable");
                spansAvailable = true;
                if(odd)
                    $found.css({'background-color':'#ccc'});
                else
                    $found.css({'background-color':'#c00'});
                odd != odd;
            }
        });
               
        //if(!spansAvailable)
        if(dummy == 5)
            break;
        
        dummy ++;
    }
    
    console.log("finished");
})