title: Button will not change color (HTML5)
body: <p>I have three buttons that act much like radio buttons - where only one can be <em>selected</em> at one time:</p>
  
  <pre><code>&lt;button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected"&gt;Bronze&lt;/button&gt;
  &lt;button id="btn-silver" name="btn-silver" type="button"&gt;Silver&lt;/button&gt;
  &lt;button id="btn-gold" name="btn-gold" type="button"&gt;Gold&lt;/button&gt;
  </code></pre>
  
  <p>For the normal, unselected state, all the buttons use a gradient background:</p>
  
  <pre><code>#btn-bronze
  {
      float: left;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
      -webkit-border-top-left-radius: 6px;
      -webkit-border-bottom-left-radius: 6px;
      width: 33%;
      height: 100%;
  }
  
  #btn-silver
  {
      float: left;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
      width: 33%;
      height: 100%;
  }
  
  #btn-gold
  {
      float: left;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
      -webkit-border-top-right-radius: 6px;
      -webkit-border-bottom-right-radius: 6px;
      width: 33%;
      height: 100%;
  }
  </code></pre>
  
  <p>When selected, the selected button should add this class to modify the background color:</p>
  
  <pre><code>.blue-selected
  {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));;
  }
  </code></pre>
  
  <p>This is done using <code>jQuery</code> in the method that is called when the body loads:</p>
  
  <pre><code>$("#btn-bronze").click(function() 
  {
  
      console.log("bronze");
      $(this).addClass('blue-selected');
      $("#btn-silver").removeClass('blue-selected');
      $("#btn-gold").removeClass('blue-selected');
  });
  
  $("#btn-silver").click(function() 
  {
      console.log("silver");
      $("#btn-broze").removeClass('blue-selected');
      $(this).addClass('blue-selected');
      $("#btn-gold").removeClass('blue-selected');
  });
  
  $("#btn-gold").click(function() 
  {
      console.log("gold");
      $("#btn-broze").removeClass('blue-selected');
      $("#btn-silver").removeClass('blue-selected');
      $(this).addClass('blue-selected');
  });
  </code></pre>
  
  <p>When I click one of these buttons, the console log message appears, but the background color remains the same. What am I doing wrong? <strong><a href="http://jsfiddle.net/PhDBrown/4ZygH/" rel="nofollow">Here is the fiddle</a></strong>.</p>