jQuery button toggle issue with .click()

Question

Я хотел бы создать кнопку, которая когда .click() удаляет класс и добавляет другой. В конечном счете, я бы хотел, чтобы две кнопки меняли цвета фона, когда я нажимаю один и другой.

HTML

<button id="addBot" class="bot"><span>+</span></button> 
<button id="subBot" class="bot"><span>-</span></button> 

CSS

.bot { 
    border-color: #3071a9; 
    border-style: solid;  
    border-width: 1.5px; 
    border-radius: 0px; 
    width: 30px; 
    height: 20px; 
} 
.blue1 { 
    background-color: #3071a9; 
} 

.white1 { 
    background-color: #ffffff; 
} 

JS

 $(document).ready(function() { 
      //1 is blue 
      //0 is white 
      var addColor = 1; 
      var subColor = 0; 
      $('#addBot').addClass('blue1'); 
      $('#subBot').addClass('white1'); 

      $('#addBot').click(function() { 
       if(addColor == 1) { 
        $('#addBot').removeClass('blue1'); 
        $('#addBot').addClass('white1'); 
        addColor = 0; 
       } else { 
        $('#addBot').removeClass('white1'); 
        $('#addBot').addClass('blue1'); 
        addColor = 1; 
       } 
      }); 
     } 

Примечание Этот код делает "работу". Когда я нажимаю на свою кнопку, она меняется на другой цвет, но только на долю секунды, а затем немедленно переключается. Я также пытался использовать .on ('click', function() {}), и это тоже не работает.

Answer 1

Simplify далее без вар добавить цвет

var addColor = 1; 
 
      var subColor = 0; 
 
      $('#addBot').addClass('blue1'); 
 

 
      $('#addBot').click(function() { 
 
       $('#addBot').toggleClass('blue1'); 
 
      });

.bot { 
 
    border-color: #3071a9; 
 
    border-style: solid;  
 
    border-width: 1.5px; 
 
    border-radius: 0px; 
 
    width: 30px; 
 
    height: 20px; 
 
    background-color: #ffffff; 
 
} 
 
.blue1 { 
 
    background-color: #3071a9; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<button id="addBot" class="bot"><span>+</span></button> 
 
<button id="subBot" class="bot"><span>-</span></button>