JSFiddle - React, Tailwind, and code Playground

by RaphaelDDL

HTML

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

CSS

.item {
    height: 15px;
    background-color: #f00;
    border-top:1px solid white;
}

.randomDiv {
    height: 15px;
    background-color: #0f0;
}

JavaScript

itemLength = $('#container .item').length; //quantity of .items
    randomPlace = Math.floor((Math.random()*itemLength)); //some random from 0 to .item length
    
    randomDiv = $('<div />',{
        'class':'randomDiv',
        text: randomPlace
    }); //.randomDiv
    
    $('#container .item').eq(randomPlace).after(randomDiv); //place it after the .item of position 'randomPlace'