Jquery input :checked show and hide div function

I am trying to create a simple JQuery function. This function has three check boxes and a compare button. Example can be Seen here

The objective of this function is when the user clicks on checkboxes 1 and 2 it compares the content of hidden containers one and two. When users clicks on checkboxes 1 and 3 it compares the content of hidden containers one and three.

I can't get this function get this working. I added a snippet of code below

$(document).ready(function() {
  var $checkboxes = $('[name^="check"]');
  var $target = $('#target');
  var $button = $('.compare');

  $button.on('click', function() {
    var checkedLength = $('[name^="check"]:checked').length
    if (checkedLength === 2) {
      $target.addClass('compareOne');
      $target.removeClass('compareTwo');
    } else if (checkedLength === 3) {
      $target.addClass('compareTwo');
      $target.removeClass('compareOne');
    } else if (checkedLength === 4) {
      $target.addClass('compareThree')
      $target.removeClass('compareTwo compareOne')
    } else {
      $target.removeClass('compareTwo compareOne compareThree')
    }
  })
});