title: How to keep one class active at a time in Jquery
body: <p>I am currently working on an donation form for a client and am having some issues with the buttons. As shown below:</p>
  
  <p>when I click on that input box it gives the correct background color but if I type something in to it and delete that value the background color will stay and toggle back to the default value of 50. I want to input box to ALWAYS be the only one active if the text curser is there. Even if a user deleted what they type and the curser is still there I want the input box to be the only one with that background color while it shows it's active.</p>
  
  <p><a href="https://i.stack.imgur.com/MyX5N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MyX5N.png" alt="enter image description here"></a></p>
  
  <p>so if I just click on it it will be the only one active but when I type something into it and delete it it will remain active but also toggle the default of $50 so two will be active at one time.
      <a href="https://i.stack.imgur.com/gps0b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gps0b.png" alt="enter image description here"></a></p>
  
  <p>here is my jquery:</p>
  
  <pre><code>var defaultValue = 50; 
  
  $(document).ready(function() {
  
  $('#donation-amount').keyup(function() {
          this.value = this.value.replace(/[^0-9\.]/g,'');
  
        if($(this).val()) {
           $('#display-amount').text($(this).val());
      } else {
         $('#display-amount').text(defaultValue);
         $("#default").addClass('active');
         $("#btn2").removeClass('active');
         $("#btn3").removeClass('active');
      }
  });
  
       $( ".selectvalue" ).click(function() {
          $('#display-amount').text($(this).val());
       });
  
      $(".buttons .btn").click(function(){
          $(".buttons .btn").removeClass('active');
          $(this).toggleClass('active'); 
        $('#donation-amount').css("background-color","") 
      });
  $("#donation-amount").click(function() {
  
           if ($(this).hasClass('inpt-first')) {
               $(this).css("background-color", "#c97e06");
               $("#default").removeClass('active');
               $("#btn2").removeClass('active');
               $("#btn3").removeClass('active');
              $('#display-amount').text('--');
           } 
  
          else{
              $("#default").addClass('active');   
  
          }
  
      });
  $('#donation-amount').blur(function() {
    $(this).attr('style', '');
    if($(this).val() == null || $(this).val() == 'Custom') {
      $('#default').addClass('active');
      $('#display-amount').text(50);
    }
  });
  
      $('#display-amount').text($('#default').val());
  
  });
  </code></pre>
  
  <p>here is my html:</p>
  
  <pre><code>&lt;div class="form-container"&gt;
  &lt;div class="donate-heading text-center"&gt;
    &lt;h1&gt;Donate Now!&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="form-content"&gt;
  
  &lt;form action="" method="POST" id="payment-form"&gt;
    &lt;span class="payment-errors"&gt;&lt;/span&gt;
  
    &lt;div class="content-inner"&gt;
    &lt;div class="row"&gt;
      &lt;div class="form-group"&gt;
        &lt;fieldset&gt;
          &lt;legend class="text-center"&gt;How much would you like to donate&lt;/legend&gt;
          &lt;div class="choose-pricing"&gt;
            &lt;div class="btn-group"&gt;
            &lt;div class="buttons"&gt;
              &lt;button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50"&gt;50&lt;/button&gt;
              &lt;button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100"&gt;100&lt;/button&gt;
              &lt;button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150"&gt;150&lt;/button&gt;
              &lt;input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom"&gt;
              &lt;/div&gt;
              &lt;input type="hidden" name="donation-amount-value" id="donation-amount-value"&gt;
            &lt;/div&gt;
            &lt;div class="money-donate"&gt;
              &lt;div class="display-amount" id="display-amount"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;legend class="text-center"&gt;Enter your card details&lt;/legend&gt;
    &lt;span class="full"&gt;Enter yor 16 digit card number:&lt;/span&gt;
    &lt;div class="credit-card-num"&gt;
      &lt;input type="text" name="cardNumber" id="creditCardNumber" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="XXXX-XXXX-XXXX-XXXX" data-stripe="number"&gt;
    &lt;/div&gt;
    &lt;div class="text-center"&gt;
    &lt;div class="date-wrapper"&gt;
      &lt;div class="month"&gt;
        &lt;span class="full"&gt;Month &amp; Year of Expiry:&lt;/span&gt;
        &lt;select name="month" id="expMonth" class="selectBox chzn-done" data-stripe="exp-month"&gt;
          &lt;option data-stripe="cvc"&gt;Select Month&lt;/option&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
        &lt;/select&gt;
        &lt;div id="expMonth_chzn" class="chzn-container chzn-container-single"&gt;
          &lt;a href="javascript:void(0)" class="chzn-single" tabindex="-1"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;select name="year" id="expYear" class="selectBox chzn-done" data-stripe="exp-year"&gt;
          &lt;option value=""&gt;Select Year&lt;/option&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="cvn"&gt;
        &lt;span class="full"&gt;Card Verrification Number
          &lt;a href="#" class="tooltip"&gt;
            &lt;img src="/wp-content/themes/creativeforces/images/question.png" alt="question"&gt;
          &lt;/a&gt;
          &lt;div class="tooltip-hover"&gt;
            &lt;img src="" alt=""&gt;
          &lt;/div&gt;
        &lt;/span&gt;
        &lt;input type="password" name="cardVeriNum" id="cardVeriNum"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;fieldset class="personal-detail"&gt;
      &lt;legend class="text-center"&gt;Personal Details&lt;/legend&gt;
      &lt;div class="row"&gt;
        &lt;div class="form-group"&gt;
          &lt;input type="text" name="name" class="form-control" id="name" placeholder="First Name"&gt;
          &lt;input type="text" name="last_name" class="form-control" id="last_name" placeholder="Last Name"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="form-group"&gt;
          &lt;input type="text" name="email" class="form-control" id="email" placeholder="Email"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
         &lt;div class="row"&gt;
        &lt;div class="form-group"&gt;
          &lt;!-- &lt;textarea name="address" class="form-control" id="address"&gt;Address&lt;/textarea&gt; --&gt;
          &lt;textarea name="notes" class="form-control" id="add-note" placeholder="Additional Notes"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="form-group button"&gt;
        &lt;div class="text-center"&gt;
        &lt;button id="donate-btn" value="Donate" class="btn btn-default"&gt;Donate&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/fieldset&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>any help would be appreciated!</p>