I have a set of buttons as per the HTML below. Once button is clicked, it will show the data set according to the data-filter.

Two questions.

1. How do get everything to be displayed when I click on News button? (means no filter)
2. Currently, when I click on the button, and click another button, the previous button will still be selected. How do I un-select the previous one when another button is clicked?

<div class="filters" id="getFixed">
  <div class="ui-group">
    <div class="button-group js-radio-button-group">
    <li class="sort-button" data-filter="">News</li>
      <li class="sort-button" data-filter=".instructor">Instructors</li>
      <li class="sort-button" data-filter=".clubs">Club Spotlight</li>
    </div>
  </div>
</div>

var filters = [];
$('.filters').on( 'click', '.sort-button', function( event ) {
  var $target = $( event.currentTarget );
  $target.toggleClass('is-checked');
  var isChecked = $target.hasClass('is-checked');
  var filter = $target.attr('data-filter');
  if ( isChecked ) {
    addFilter( filter );
  } else {
    removeFilter( filter );
  }
  $grid.isotope({ filter: filters.join(',') });
});

Thank you in advance!