JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<div class="post">
    <span id="a"></span>
    <span id="b"></span>
    <span id="c"></span>
    <span id="d"></span>
    <span id="e"></span>
    <span id="f"></span>
    <span id="g"></span>
    <span id="h"></span>
</div>

CSS

.post span {
    display : inline-block;
    width : 50px;
    height : 50px;
    margin : 8px;
}

JavaScript

$(function() {

var colors = [];
    $(".post span").each(function(i, el) {
        var r = ((Math.random()*0xFFFFFF<<0).toString(16));
        r = r.length < 6 ? r + (1 + Math.floor(Math.random() * 9)) : r;
        var color = "#" + r ;
        // $(el).css("background-color", color);
        colors.push([el.id, color]);
      });
    $.each(colors, function(k, v) {
       $(".post span[id="+v[0]+"]").css("background-color", v[1])
    })
})