Give buttons an active styling for change content javascript

I am creating a section in Elementor that has five buttons. Each one changes the content inside an adjacent section using Javascript. The functioning code is:

var $ = jQuery

$(document).ready(function() {
  $('[data-showme]').on('click', function() {
    var showme = $(this).attr('data-showme')

    $('.all-content').hide()
    $('#' + showme).show()
  })
})

.all-content {
  display: none;
}

#professionals-content {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

There is also an attribute that doesn’t seem to fit into this forum’s code structure:

data-showme|ID-NAME-content

The attribute tells the content which button to respond to. I already have css code working to tell the button how to react to hover, but I couldn’t get any css to make the button that is currently active to remain in a style, until another one is clicked and that one gains the active style. I know it likely requires javascript so I came here. Something like what the hover code has:

selector a:hover {
  border-width: 0px 0px 0px 3px;
}

How can I make this work?