JSFiddle - React, Tailwind, and code Playground

by fenderistic

HTML

<div class="container">
  <ul id="selectable">
   <li id="object1" class="ui-selected">Object 1</li>
   <li id="object2">Object 2</li>
   <li id="object3">Object 3</li>
   <li id="object4">Object 4</li>
   <li id="object5">Object 5</li>
   <li id="object6">Object 6</li>
  </ul>
</div>

<div id="otherObject">TEST</div>

CSS

#object1, #object2, #object3, #object4, #object5, #object6 {
   'width:100px;
   'height:100px;
}
#otherObject {
   width:100px;
   height:100px;
   position:relative;
   top: 0px;
}
#otherObject.newClass {
   'top: 50px;
    color:red;
}

JavaScript

$('#object1').click(function(){
 if ($('#object1').hasClass('ui-selected')){
     $('#otherObject').addClass('newClass');
    }
});