title: Allow only one button to be clicked at a time
body: <p>I'm creating a form with different button options. I want the user to only be allowed to select one button. Basically I have 6 of these buttons inside of the form and when you click it the button color changes to green and says selected. Right now I can select all of the button options, I want it to where when I click one of the buttons if I click another one, then the first one I selected gets "unchecked"</p>
  
  <pre><code>   &lt;button type="button" class="button-school" value="hidden-springs"&gt;
                &lt;h2&gt;Hidden Springs&lt;/h2&gt;
                &lt;span class="select-active"&gt;SELECT&lt;/span&gt;
     &lt;/button&gt;
  </code></pre>
  
  <p>I only posted one of the buttons but they are all the same with different values and h2 values. I was trying to find something online to help me but I was really only seeing things for radio buttons, this one is one that I made myself. </p>
  
  <p>Here is what I have so far: </p>
  
  <pre><code>&lt;script&gt;
  jQuery('.button-school').click(function() {
    jQuery(this).toggleClass('active');
    if (jQuery(this).hasClass('active')) {
      jQuery(this).html(jQuery(this).html().replace('SELECT', 'SELECTED'));
    } else {
      jQuery(this).html(jQuery(this).html().replace('SELECTED', 'SELECT'));
    }
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I see stuff about "if clicked" can I do something where I can only have one "active"? </p>