How to add a class on text when clicked to its respective image and remove it when click at another image and do the same with other image text

Question

I have six vertical dots as images and i am giving respective text to it when clicked on the image its respective text change its property.

i tried clicking on the picture and selecting its respective text id but it should be working dynamically

 $(".parallx-dot-1").on('click',function(){
  $("#123").css("color","white"); 

I want when parallx-dot-1 is clicked its respective icon-text change its css property to color:#ffffff

Current code

$(".parallx-dot-1").on('click',function(){
  $("#123").css("color","white");
//$("$icon-text").css("color","white"); <-- (Class replaced with id)

 .icon-text { position: relative; right: 40px; color: #5D5D5D; font: 16px 'HelveticaNeue regular'; float: left; width: 50%; } 

 <ul class="paralx-position"> <li class="parallx-dot-1"><span class="icon-text" id="123">Accelerate</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"/> </li> <li class="parallx-dot-1"><span class="icon-text">Transform</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"/> </li> <li class="parallx-dot-1"><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"/></span> </li> <li class="parallx-dot-1"><span class="icon-text">Ignite</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4" tabindex="0"/> </li> <li class="parallx-dot-1"><span class="icon-text">Develop</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"/> </li> <li class="parallx-dot-1"><span class="icon-text">Engineer</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"/> </li> </ul> 

Answer 1

You can change the text-color from purple to white in css,Hope this helps

 $('.parallx-dot-1').click(function(e){ $(this).find('span').addClass('text-color') }) 

 .icon-text{ position:relative; right:40px; color:#5D5D5D; font:16px 'HelveticaNeue regular'; float: left; width: 50%; } .text-color { color:purple; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="paralx-position"> <li class="parallx-dot-1"><span class="icon-text" id="123">Accelerate</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"/> </li> <li class="parallx-dot-1"><span class="icon-text">Transform</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"/> </li> <li class="parallx-dot-1"><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"/></span> </li> <li class="parallx-dot-1"><span class="icon-text">Ignite</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4" tabindex="0"/> </li> <li class="parallx-dot-1"><span class="icon-text">Develop</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"/> </li> <li class="parallx-dot-1"><span class="icon-text">Engineer</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"/> </li> </ul> 

Answer 2

You can used the below script,it will add active class to span tag respectively the image is click.

$(".parallx-dot-1").click(function() {
   $(this).find('span').addClass('active');
});

and in active class you can set color like this:

.active{
  color:#ffffff;
}