jQuery active class is not removing when other button is clicked-CodePudding

I have two html buttons that show different information when clicked. I am using jQuery to change which button has the default button CSS and the active button CSS. My code is below. Currently, when I click the opposite button, the default active button does not switch to inactive styles. Any suggestions? Thanks in advance!

HTML:

<div >
<button type="button" id="xValues" >Button 1</button>
<button type="button" id="yValues" >Button 2</button></div>

jQuery:

$('.btn-group').on('click', 'button', function(){
$('.btn-group button.active-2').removeClass('active-2');
$(this).addClass('active-2');

CSS:

.center-buttons {
    text-align: center;
    margin: 20px 0px;
}

    .container {
    display: flex;
}

.space-between {
    justify-content: space-between;
}

.mobile-buttons {
    margin: 5px;
    border: none;
    border-bottom: 3px solid #B0B0B0;
    color: #B0B0B0;
    font-weight: 700;
    font-size: 12px;
}

.active-2, .mobile-buttons:hover {
    background-color: #fff;
    border-bottom: 3px solid #2d2d2d;
    color: #2d2d2d;
}

.desktop-w {
    width: 49%;
}

CodePudding user response：

There seems to be a syntax error in the jQuery code. The application runs when the event handler method is terminated with "})".

/* The event handler method is not terminated with "})". */
$('.btn-group').on('click', 'button', function(){
  $('.btn-group button.active-2').removeClass('active-2');
  $(this).addClass('active-2');
});

.center-buttons {
  text-align: center;
  margin: 20px 0px;
}
.container {
  display: flex;
}
.space-between {
  justify-content: space-between;
}
.mobile-buttons {
  margin: 5px;
  border: none;
  border-bottom: 3px solid #B0B0B0;
  color: #B0B0B0;
  font-weight: 700;
  font-size: 12px;
}
.active-2, .mobile-buttons:hover {
  background-color: #fff;
  border-bottom: 3px solid #2d2d2d;
  color: #2d2d2d;
}
.desktop-w {
  width: 49%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<button type="button" id="xValues" >Button 1</button>
<button type="button" id="yValues" >Button 2</button></div>