JSFiddle - React, Tailwind, and code Playground

by Dineshkani

HTML

<div id="firstdiv" class="sample">
    <div >Hello World</div>
    <div class="simple">Foo</div>
    <div>Welcome</div>
    <div>Ends</div>
</div>

<input type="button" value="Check" />
<input type="button" value="Check2" />
<input type="button" value="Check3" />

CSS

.sample{
    background-color: white;
    height: 140px;
}

.foo{
    background-color: yellow;
}

JavaScript

$("input[value='Check']").click(function(){
    $("#firstdiv > div").removeClass("foo");
    $("#firstdiv > div").slice(2).addClass("foo");
});

$("input[value='Check2']").click(function(){
    $("#firstdiv > div").removeClass("foo");
    $("#firstdiv > div").slice(1,4).addClass("foo");
});

$("input[value='Check3']").click(function(){
    $("#firstdiv > div").removeClass("foo");
    $("#firstdiv > div").slice(-3,-1).addClass("foo");
});