JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<div id="content">
     <h1>Random plaatjes</h1>

    <div class="pics">
        <div class="heading">
            <div class="cell">Plaatjes 1</div>
            <div class="cell">Plaatjes 2</div>
            <div class="cell">Plaatjes 3</div>
            <div class="cell">Plaatjes 4</div>
        </div>
        <div class="row">
            <div class="cell">Plaatje 1</div>
            <div class="cell">Plaatje 2</div>
            <div class="cell">Plaatje 3</div>
            <div class="cell">Plaatje 4</div>
        </div>
        <div class="row">
            <div class="cell">Plaatje 1</div>
            <div class="cell">Plaatje 2</div>
            <div class="cell">Plaatje 3</div>
            <div class="cell">Plaatje 4</div>
        </div>
        <div class="row">
            <div class="cell">Plaatje 1</div>
            <div class="cell">Plaatje 2</div>
            <div class="cell">Plaatje 3</div>
            <div class="cell">Plaatje 4</div>
        </div>
        <div class="row">
            <div class="cell">Plaatje 1</div>
            <div class="cell">Plaatje 2</div>
            <div class="cell">Plaatje 3</div>
            <div class="cell">Plaatje 4</div>
        </div>
    </div>
</div>

CSS

.highlight {
    color: #fFF;
    background-color: #333;
}

JavaScript

var ids=[];
for(i=1;i<=5;i++)
{
        var $divs = $('.cell');
    var random = Math.floor(Math.random() * $divs.length);
     ids.push(random);
    if(ids!=random)
    {
        $divs.eq(random).addClass('highlight');
        alert("first");
    }
    else
    {
         
alert("second");
                if($('td').hasClass()!="highlight");
             {
                 $('td').addClass('highlight');      
             }

             
           
    }
    
}