Find any sibling that has matching class

Question

I have a toolbar with buttons. Only one button has the class 'btn-info' for instance to indicate it is currently selected.

But it may not be 'btn-info', it could be btn-anything.

If I click any of the buttons in the tool bar I want to know what the matching class is on which ever button is selected.

I have tried:

$('.btn-toggle-group .btn').click(function(){
    var selectedClass = $(this).siblings('button[class^="btn-"]').prop('class')
    $('.btn-toggle-group .btn').removeClass('btn-info btn-primary btn-danger btn-success btn-warning btn-default')
})

And...

$('.btn-toggle-group .btn').click(function(){
    var selectedClass = $(this).parent().find('[class^="btn-"]').prop('class')
    $('.btn-toggle-group .btn').removeClass('btn-info btn-primary btn-danger btn-success btn-warning btn-default')
})

But to no avail.

How can I achieve this? The solution in Jquery or pure Javascript is fine (Javascript is preferred as it is native and faster).

---

 <div class="btn-group btn-toggle-group">
            <button type="button" class="btn btn-info">Current</button>
            <button type="button" class="btn">Deleted</button>
        </div>

Answer 1

Try using * instead of ^

$(this).siblings('button[class*="btn-"]').prop('class');

Answer 2

I think you just need to switch to .attr('class') instead of .prop('class'). DOM elements have properties className and classList; you could also use those if preferred.