title: jQuery onClick: How to add class to element and remove from all others
body: <p>You will have to excuse a probably very basic question as I am still getting to grips with jQuery.</p>
  
  <p>I've set up this code so that on click of the .team-member figure elememt, a class called 'overlayOn' is added which adds an absolutely positioned div with an rbga colour (anyway I digress).</p>
  
  <p>This works perfectly, except I want it so that on click of an element it adds the 'overlayOn' class and disables the others.
  Now I know this should be a simple case of removeClass, or toggleClass but I cannot for the life of me get this working. The annoying thing is I have actually done this before but cannot see where I am going wrong this time.</p>
  
  <pre><code>jQuery(document).ready(function() {
  // Store the references outside the event handler
   var $window = jQuery(window);
   var $memberItem = ".team-member figure";
   function checkWidth() {
      var windowsize = $window.width();
      console.log(windowsize);
      if (windowsize &lt; 768) {
          // if the window is smaller than 768px then allow click to see overlay
        jQuery($memberItem).click(function(event) {
                  event.preventDefault();
                  jQuery(this).toggleClass('overlayOn');
        });
    }
  }
  
  // Execute on load
  checkWidth();
  
  // Bind event listener
  jQuery(window).resize(checkWidth);
  </code></pre>
  
  <p>});</p>
  
  <p>Updated: Below is my code from the suggestions given, when clicking on an element now it will remove the class from others but if I want to click on an element with the overlayOn class to remove it from itself it will not work.</p>
  
  <p>My updated code is below.</p>
  
  <pre><code>jQuery(".team-member figure").click(function (event) {
    var $window = jQuery(window);
    var windowsize = $window.width();
    if (windowsize &lt; 768) {
        event.preventDefault();
        $('.team-member figure').removeClass('overlayOn');
        $(this).toggleClass('overlayOn');
    }
  });
  </code></pre>