JSFiddle - React, Tailwind, and code Playground

by James Connolly

HTML

<ul class="test-block">
  <li>prev modal</li>
  <li>prev modal</li>
  <li>prev modal</li>
</ul>

<ul class="test-block main">
  <li class="modal-prev">prev modal</li>
  <li class="modal-next">next modal</li>
  <li class="close-modal">item 3</li>
</ul>

<ul class="test-block">
  <li>next modal</li>
  <li>next modal</li>
  <li>next modal</li>
</ul>

CSS

.click-me {
  cursor: pointer;
}

.target-clicked {
  background: green;
  color: #fff;
}

.close {
  background: red;
  color: #fff;
}

.main {
  background: #eee;
}

JavaScript

$( ".test-block" ).each(function() {

	$( ".modal-prev" ).on( "click", function() {
    $(this).closest('.test-block').prev().addClass('target-clicked');
    $('.close-modal').addClass('close');
  });
  
  $( ".modal-next" ).on( "click", function() {
    $(this).closest('.test-block').next().addClass('target-clicked');
    $('.close-modal').addClass('close');
  });

});