Trying to create a checkbox for comparing elements

So far I manage to show/hide button when checkbox is checked but its checking all checkbox which I don't want.

my goal is to check different checkboxes without ticking all of them at the same time.

Edit: also to count how many elements have been checked.

http://ift.tt/1Oqkeg2

<input type="checkbox" class="compare" name="compare">
<label for="compare" class="compare-label ml-10"> Compare</label>
<!-- <div class="compare-btn"></div> -->
<button class="compare-btn ml-10" style="display: none;">Compare</button>

<input type="checkbox" class="compare" name="compare">
<label for="compare" class="compare-label ml-10"> Compare 2</label>
<!-- <div class="compare-btn"></div> -->
<button class="compare-btn ml-10" style="display: none;">Compare</button>

        $('.compare').click(function() {
        if($('.compare').is(':checked')){
            $('.compare-label').hide();
            $('.compare-btn').show();            
        } else{
            $('.compare-label').show();
            $('.compare-btn').hide();
        }
    });