JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li>Test</li>
          <li>Test</li>
          <li>Test</li>
          <li>Test</li>
          <li>Test</li>
          <li>Test</li>
          <li>Test</li>
          <li>Test</li>
    </ul>
</div>

CSS

.test {
    width: 500px;
    height: 500px;
    border: solid black 1px;
    overflow:visible;
}
.minor {
    left:300px;
    height:100px;
    width:100px;
    display:block;
    margin-left:100px;
}

JavaScript

$.fn.gt=function (el) {
    var num=el.is($)?el.index():parseInt(el,10);
    return this.slice(num-1);
    };

$.fn.lt=function (el) {
    var num=el.is("$")?el.index():parseInt(el,10);
   return this.slice(0,num-1);
    };


$("li").on("click", function () {
    $("li").lt($(this)).css("opacity",.4);
    $("li").gt($(this).index()).css("background-color","red");
});