title: addclass not working jquery
body: <p>I have two divs, one is green, and the other is red. They have classes of "green" and "red" respectively. When I use the addClass() function (triggered by clicking on the div), the new class is added, and the div changes color. However, when I click on it again right after, the new class isn't added and the div doesn't change color. </p>
  
  <p>However, when I click on the other div right below the other one, it works and the classes are updated.</p>
  
  <p>my HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
      &lt;script type="text/javascript" src="javascript/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="javascript/main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="red"&gt;
  &lt;/div&gt;
  &lt;div class="green"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>my css code:</p>
  
  <pre><code> body{
      margin:0;
      padding:0;
  }
  
      .green{
          width:100%;
          height:8vh;
          position:relative;
          background-color:green;
          margin:auto;
      }
  
  
      .red{
          width:100%;
          height:8vh;
          position:relative;
          background-color:red;
          margin:auto;
      }
  </code></pre>
  
  <p>my Javascript code:</p>
  
  <pre><code>$(document).ready(function(){
  $(".green").click(function(){
      $(".green").addClass("red");
      $(".green").removeClass("green");
  });
  
  $(".red").click(function(){
      $(".red").addClass("green");
      $(".red").removeClass("red");
  });
  
  });
  </code></pre>