title: Changing click / toggle script to add additional buttons
body: <p>I need to add three more buttons to this script for a total of 5.  </p>
  
  <p>I first made the script for two buttons, but I now need to add three more.</p>
  
  <p>Would I only be concerned with this portion? Is this the only area I need to change?</p>
  
  <pre><code>    var varval = '';
      if ($(this).hasClass('button-toggle-on')) {
          varval = $(this).hasClass('gnF') ? 'Female' : 'Male';
  </code></pre>
  
  <p>Link:  <a href="http://jsfiddle.net/9cr4F/9/" rel="nofollow">http://jsfiddle.net/9cr4F/9/</a></p>
  
  <p>Here is my script:</p>
  
  <pre><code>$(function() {
  var $buttons = $("input[type='button']");
  $buttons.click(function() {
  
      $(this).parent().siblings('.bx, #bxGender .gender').css({'background':'#2F2F2F','color':'#fff'});
      $buttons.not(this).removeClass('button-toggle-on');
      $(this).toggleClass('button-toggle-on').attr('style','');
  
      var varval = '';
      if ($(this).hasClass('button-toggle-on')) {
          varval = $(this).hasClass('gnF') ? 'Female' : 'Male';
  
      $(this).siblings('input[type="button"]').css('background-position','0 -180px');
      }
      else {
            $(this).siblings('input[type="button"]').attr('style','');
         $(this).parent().siblings('.bx').attr('style',''); 
      }
      $("#gender").val(varval);
  });
  });​
  </code></pre>