title: Problems with Div Class Background Color Change with JQuery
body: <p>I'm doing a little experimenting with using php for loops to generate a massive amount of divs that can be altered through JQuery changes to their css. The riddle I'm trying to solve right now is generating a checkerboard, a series of square black and white divs, which upon click will swap colors. I'm having trouble wrapping my brain around how the onClick event is looking at the situation. </p>
  
  <p>Here is where I got stuck</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
    .yes { background: black; 
          height: 50px;
          width: 50px;
          float: left;
          }
    .no { background: white; 
          height: 50px;
          width: 50px;
          float: left;
          }  
  
    &lt;/style&gt;
    &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;?php 
          $j = 0;
      for($i = 0; $i &lt; 100; $i++){
          if ($j == 0){
                  echo "&lt;div class = 'yes'&gt;yes&lt;/div&gt;";
                  $j++;
              }
              if ($j == 1){
                  echo "&lt;div class = 'no'&gt;no&lt;/div&gt;";
                  $j--;
              }
      }
    ?&gt;
  
  &lt;script&gt;
    var bw = 0;
    $(".no, .yes").one( "click", function () {
      if (bw == 0){
          $(".no" ).css( "background-color","black" );
          $( ".yes" ).css( "background-color","white" );
          bw++;
      }
          else {
          $(".no" ).css( "background-color","white" );
          $( ".yes" ).css( "background-color","black" );
          bw--;
          }
  
  
     });
      &lt;/script&gt;
  
    &lt;/body&gt;
    &lt;/html&gt; 
  </code></pre>
  
  <p>Some weird shift is going on where clicking some divs trigger the color change and other don't. 
  If you guys have any interesting ideas please share.</p>