Ufdjrw

Here is my dynamically generated lists :

<ul class="config-swatch-list">

 <li class='color' onclick="color_select();">
 <a href="#" style="background-color: random_val"></a>
 </li>
 <li class='color' onclick="color_select();">
 <a href="#" style="background-color: random_val"></a>
 </li>
 <li class='color' onclick="color_select();">
 <a href="#" style="background-color: random_val"></a>
 </li>
 <li class='color' onclick="color_select();">
 <a href="#" style="background-color: random_val"></a>
 </li>
 <li class='color' onclick="color_select();">
 <a href="#" style="background-color: random_val"></a>
 </li>

</ul>

and the js function:

function color_select() 
 $('#color').click(function()
 
 if ($(this).hasClass('active')) 
 console.log('clicked');
 $(this).removeClass('active');
 else 
 $(this).addClass('active');
 
 );

My problem is using this code when I clicked 1st li element, this js function add a active class successfully . But this does not work for 2nd, or 4th li element (printing clicked in console).So the codes only working for 1st, 3rd , and 5th li elements. If I double click 2nd or 4th li element then the code working as expected.

All I want to do is after a click change a single li element css class to active or remove active class if there is already existing active class.

Remove onclick attributes from <a>. And don't wrap click inside other function. And also use .color instead of #color
`

$('.color').click(function()

 if ($(this).hasClass('active')) 
 console.log('clicked');
 $(this).removeClass('active');
 else 
 $(this).addClass('active');
 
);

.active
 color:orange;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">

 <li class='color'>
 <a href="#" style="background-color: random_val">one</a>
 </li>
 <li class='color'>
 <a href="#" style="background-color: random_val">two</a>
 </li>
 <li class='color'>
 <a href="#" style="background-color: random_val">three</a>
 </li>
 <li class='color' >
 <a href="#" style="background-color: random_val">four</a>
 </li>
 <li class='color'>
 <a href="#" style="background-color: random_val">five</a>
 </li>

</ul>

jQuery.click() vs onClick .. you can still use onclick .. and use toggleClass() for active class instead of add/removeClass

function color_select(el) 
 $('.color').removeClass('active').filter(el).toggleClass('active'); // remove active class from the li's and toggle the class for the clicked element

.active
 color : red;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="config-swatch-list">

 <li class='color' onclick="color_select(this);">
 <a href="#" style="background-color: random_val">Link 1</a>
 </li>
 <li class='color' onclick="color_select(this);">
 <a href="#" style="background-color: random_val">Link 2</a>
 </li>
 <li class='color' onclick="color_select(this);">
 <a href="#" style="background-color: random_val">Link 3</a>
 </li>
 <li class='color' onclick="color_select(this);">
 <a href="#" style="background-color: random_val">Link 4</a>
 </li>
 <li class='color' onclick="color_select(this);">
 <a href="#" style="background-color: random_val">Link 5</a>
 </li>

</ul>

^{But to be honest personally I don't prefer to use onclick= using a .click which presented by @Maheer answer is for me much much better}