title: $(class).click() not working
body: <p>Beginner here. I made some simple code that added a class to certain images when I click a button. When I click an image with that class, I want to remove the class from all elements that have it. However, I can't seem to remove the class. Here's all the relevant HTML/CSS:
      </p>
  
  <pre><code>.us{
      border-style:solid;
      border-color:#ff0000;
      }
  
  ...
  
  &lt;button id="us_select"&gt; select American films &lt;/button&gt;&lt;br&gt;
  &lt;!--When I click this button, all images of American films will have red borders by 
  adding the "us" class--&gt; 
  
  &lt;img id="sutter" src="sutter.png" alt="sutter"&gt;
  &lt;img id="theo" src="her.png" alt="theo"&gt;
  &lt;img id="holly" src="holly.png" alt="holly"&gt;
  &lt;img id="matsu" src="matsu.png" alt="matsu"&gt;
  &lt;img id="jesse" src="jesse.png" alt="jesse"&gt;
  </code></pre>
  
  <p>And javascript</p>
  
  <pre><code>$(document).ready(function(){
      $("#us_select").click(function(){
          $("#sutter,#theo,#holly,#jesse").addClass("us");
          //adds "us" class to the four images. 
      });
      $(".us").click(function(){
          $(this).removeClass("us");
      //removes "us" class from images and thus removing red borders.
      });
  });
  </code></pre>
  
  <p>I think <code>$(".us").click(function()</code> is the source of my problem. I believe the <code>$(".us").click(function()</code> is saying that when I click a html element with the class <code>us</code>, all elements with the class <code>us</code> are selected and have the <code>us</code> class removed. But when I click an image with the <code>us</code> class, nothing happens. Any ideas why?</p>
  
  <p>I noticed this code works and is kind of what I'm looking for. </p>
  
  <pre><code>$("img").click(function(){
          $(.us).removeClass("us");
      });
  </code></pre>
  
  <p>But this code removes the <code>us</code> class when I click any image instead of just images with the class <code>us</code>. </p>