title: jquery on click change class of list element
body: <p>Here is my dynamically generated lists :</p>
  
  <pre><code>&lt;ul class="config-swatch-list"&gt;
  
     &lt;li class='color' onclick="color_select();"&gt;
          &lt;a href="#" style="background-color: random_val"&gt;&lt;/a&gt;
     &lt;/li&gt;
     &lt;li class='color' onclick="color_select();"&gt;
          &lt;a href="#" style="background-color: random_val"&gt;&lt;/a&gt;
     &lt;/li&gt;
     &lt;li class='color' onclick="color_select();"&gt;
          &lt;a href="#" style="background-color: random_val"&gt;&lt;/a&gt;
     &lt;/li&gt;
     &lt;li class='color' onclick="color_select();"&gt;
          &lt;a href="#" style="background-color: random_val"&gt;&lt;/a&gt;
     &lt;/li&gt;
     &lt;li class='color' onclick="color_select();"&gt;
          &lt;a href="#" style="background-color: random_val"&gt;&lt;/a&gt;
     &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the js function:</p>
  
  <pre><code>function color_select() {
      $('#color').click(function()
      {
          if ($(this).hasClass('active')) {
              console.log('clicked');
              $(this).removeClass('active');
          } else {
              $(this).addClass('active');
          }
      });
  }
  </code></pre>
  
  <p>My problem is using this code when I clicked 1st <code>li</code> element, this js function add a <code>active</code> class successfully . But this does not work for 2nd, or 4th <code>li</code> element (printing <code>clicked</code> in console).So the codes only working for 1st, 3rd , and 5th <code>li</code> elements. If I double click 2nd or 4th <code>li</code> element then the code working as expected. </p>
  
  <p>All I want to do is after a click change a single <code>li</code> element css class to <code>active</code> or remove <code>active</code> class if there is already existing <code>active</code> class.</p>