JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>

CSS

div {
    border: 1px solid #ccc;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 10px;
    float: left;
}

JavaScript

function fillBefore(n) {
    var $row = $('div:contains(' + n + ')');
    var index = $row.index();
    $('div').slice(0, index + 1).css('background-color', 'red');
}

fillBefore(4);