Metafizzy Isotope script convert checkboxes to buttons

I'm using the Metafizzy Isotope to filter some data: http://ift.tt/2plXF32

Specifically using the Combination filters: http://ift.tt/2fAAiE4

I have the following filter:

<div id="options">
  <div class="option-set" data-group="CAKE">
    <input type="checkbox" value=".ateCake" id="ateCake" /><label for="ateCake">ateCake</label>
    <input type="checkbox" value=".noCake" id="noCake" /><label for="noCake">noCake</label>
  </div>
  <div class="option-set" data-group="PLATE">
    <input type="checkbox" value=".usedPlate" id="usedPlate" /><label for="usedPlate">usedPlate</label>
    <input type="checkbox" value=".usedNapkin" id="usedNapkin" /><label for="usedNapkin">usedNapkin</label>
  </div>
</div>

and the following items:

<div id="grid">
  <div class="item ateCake usedPlate">
    <p>John</p>
  </div>
  <div class="item ateCake usedNapkin">
    <p>Terry</p>
  </div>
  <div class="item noCake">
    <p>Bill</p>
  </div>
  <div class="item noCake">
    <p>Wilson</p>
  </div>
</div>

My Script looks like this:

<script>
// init Isotope
var $grid = $('.grid').isotope();

// store filter per group
var filters = {};

// Process when checkbox state changes
$('#options').on( 'change', function( event ) {
var checkbox = event.target;
var $checkbox = $( checkbox );
var group = $checkbox.parents('.option-set').attr('data-group');

// create array for filter group, if not exists
var filterGroup = filters[ group ];
if ( !filterGroup ) {
  filterGroup = filters[ group ] = [];
}
  // add/remove filter
  if ( checkbox.checked ) {
  // add filter
  filterGroup.push( checkbox.value );
} else {
  // remove filter
  var index = filterGroup.indexOf( checkbox.value );
  filterGroup.splice( index, 1 );
}
var comboFilter = getComboFilter();
$(grid).isotope({ filter: comboFilter });
$filterDisplay.text( comboFilter );
});

function getComboFilter() {
var combo = [];
for ( var prop in filters ) {
var group = filters[ prop ];
if ( !group.length ) {
  // no filters in group, carry on
  continue;
}
// add first group
if ( !combo.length ) {
  combo = group.slice(0);
  continue;
}
// add additional groups
var nextCombo = [];
  // split group into combo: [ A, B ] & [ 1, 2 ] => [ A1, A2, B1, B2 ]
  for ( var i=0; i < combo.length; i++ ) {
  for ( var j=0; j < group.length; j++ ) {
  var item = combo[i] + group[j];
  nextCombo.push( item );
  }
  }
  combo = nextCombo;
}
var comboFilter = combo.join(', ');
return comboFilter;
}
</script>

This works well with checkboxes and filters the results correctly (eg. ateCake and usedPlate etc) I'm trying to convert the "input type="checkbox"..." to "button type="button"..." and keep the same filtering working. My JS is letting me down as I can't work out how to replace the code in the script to work with buttons as the checkbox has a "checked" status which the script uses and the button will need something similar - I've read around what I can on the web and the solution appears to be using the JS to add/remove a class to the button but after several hours of trying its becoming obvious that my JS/Jquery knowledge is too limited.

Could someone kindly help me out by pointing me in the right direction or providing a small sample of code to get me started.

Many thanks.