Tengo dos botones html que muestran información diferente cuando se hace clic. Estoy usando jQuery para cambiar qué botón tiene el botón CSS predeterminado y el botón CSS activo. Mi código está abajo. Actualmente, cuando hago clic en el botón opuesto, el botón activo predeterminado no cambia a estilos inactivos. ¿Alguna sugerencia? ¡Gracias por adelantado!

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%; }