document ready code running more than once
<p>consider this code.</p>

<p>when button is clicked 'active' class is added to this, and removed for all other buttons.</p>

<p>i want the page to load with one button set with active class, but when i put that code in (document).ready at the top, it runs every time a button is clicked, (it should be removed the second another button is clicked.  </p>

<pre><code>$(document).ready(function () {
   $("#society-buttons-form .big-button :input").addClass('active');
});


    //new jquery for buttons, does not lose class
    $("#society-buttons-form .small-button :input, #society-buttons-form .big-button :input").hover(function(){
        $(this).addClass("hoveractive");
      },
      function () {
        $(this).removeClass("hoveractive");
      }
    );


    $("#society-buttons-form .small-button :input, #society-buttons-form .big-button :input").click(function(){

        $("#society-buttons-form .small-button :input, #society-buttons-form .big-button :input").removeClass('active');
        $("#society-buttons-form :input, #society-buttons-form .big-button :input").removeClass('active');
       // $("#society-buttons-form .big-button :input").removeClass('active');
        $(this).addClass('active');
        $(this).removeClass("hoveractive");

    });
</code></pre>
