title: toggleClass multiple divs
body: <p>This code works when I only have one div and I use 'div' in jquery.
  It works on the <code>&lt;p&gt;</code>.
  It even works when I pinpoint with 'div:first-of-type'.</p>
  
  <p>But when I use '#first' or '#second' the only thing that changes is the border.
  When I use 'div:last-of-type' everything changes but the background colour.</p>
  
  <p>Why is the code not working properly???</p>
  
  <pre><code>&lt;div id="first"&gt;&lt;/div&gt;
  &lt;div id="second"&gt;&lt;/div&gt;
  &lt;p&gt;hello there&lt;/p&gt;
  &lt;button&gt;button&lt;/button&gt;
  
  &lt;style&gt;
  div {
      width:200px;
      height:200px;
      background-color:midnightblue;
  }
  
  #second {
      background-color:darkgreen;
  }
  
  p {
      width:200px;
      height:20px;
      background-color:aqua;
  }
  
  button {
      width:50px;
      height:25px;
      background-color:brown;
      color:yellow;
  }
  
  .black {
      background-color:black;
      border:medium cornsilk dashed;
      width:100px;
      height:150px;
      color:aliceblue;
  }
  &lt;/style&gt;
  
       &lt;script&gt;
       $(function() {
          $('button').click(function() {
              $('#second').toggleClass('black');
          }); 
       });
       &lt;/script&gt;
  </code></pre>