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 class="center-buttons container space-between btn-group">
<button type="button" id="xValues" class="mobile-buttons desktop-w active-2">Button 1</button>
<button type="button" id="yValues" class="mobile-buttons desktop-w">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%;
}