JSFiddle - React, Tailwind, and code Playground

HTML

<div> <!-- this is the main container -->
        <ul> <!-- this is the parent of list -->
           <!-- These all are the siblings below -->
            <li>jQuery Events</li>
            <li class="second_list">jQuery Effects</li>
            <li>jQuery Traversing</li>
            <li>jQuery Misc</li>
            <li>jQuery load</li>
        </ul>
        <button class="btn1">Click here</button>
    </div>

CSS

div{ 
        width: 60%; /*width of main container*/
        margin: 0 auto;  /*For container to align center*/
        text-align: center;
        }
        li{
            /*list properties*/
        font-size: 20px;
        padding: 10px 5px;
        color: #fff;
        background-color: #808000;
        list-style: none;
        }
        button{
            padding: 10px 5px;
            font-size: 12px;
            border: 1px solid #000;
            background-color: #000;
            color: #fff;
            font-size: 12px;
        }

JavaScript

$(document).ready(function(){
            $(".btn1").click(function() { 
            $( "li.second_list" ).nextAll().css( "background-color", "#801a00" ).css( "color", "#ff9933" );
            });
        });