JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div style="width:500px;" class="siblings">
  <ul>ul (parent)  
    <li>li (sibling)</li>
    <li>li (sibling)</li>
    <li class="next">li (sibling with class name "next")</li>
    <li>li (the next sibling of li with class name "next")</li>
    <li>li (sibling)</li>
  </ul>   
</div>

CSS

.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}

.next {
background-color: red;
}

JavaScript

$(document).on('click','.next',function() {
$(this).removeClass('next');
alert('removed class');
$(this).next().addClass('next');
});