JSFiddle - React, Tailwind, and code Playground

by mayanksaxena19

HTML

<ul class="paralx-position">
                   <li class="paralx-dots"><span class="icon-text" id="2">Accelerate</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="3">Transform</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text-main">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-2" class="Active" data-box="div1"  id="img1"  tabindex="0"><span class="icon-position"><img src="images/logos/noun_build_1909132.svg" class="icon"></img></span></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="4">Ignite</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4"  tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="5">Develop</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="6">Engineer</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"></img></li>
</ul>

CSS

.highlight {
  color: white;
}

JavaScript

$(document).ready(function(){
	$('img[id^=img]').click(function(){
  		$('.highlight').removeClass('highlight');
  		var prevSpan = $(this).prev('span');
      prevSpan.addClass("highlight");
      alert(prevSpan.text()); // for debugging
    		
    });
});