can't unchecked checkbox with input button, and what's wrong with my checkbox?

when i click the checkbox which i have integrated with javascript all under control, all checkbox which i have selected is checked to and vice versa when i unchecked.

the problem is here. 1. i will integrated button with checkbox, it's fine when i click button the checkbox is checked, but other checkbox can't follow checked.

2. second problem when in click again for unchecked it's not working.

what's wrong with my code? it's so hard for me

Here's my html code:

<div class="container">
                <center>
                    <h2 style="color: white; padding-top: 32px; font-size: 50px; font-family: 'Gotham Bold';"><b>Pilih Nominal</b></h2>
                    <div style="margin-top: 35px; margin-left: -22px;">

                        <form action="" method="POST">
            <input type="hidden" name="sqn" value="20160625110635">
            <input type="hidden" name="saldo" value="Array">
            <input type="hidden" name="mac" value="64:70:02:4a:a7:e4">
            <input type="hidden" name="tid" value="01">
            <input type="hidden" name="msidn" value="6287875230364">
            <input type="hidden" name="typ" value="PREPAID">
            <input type="hidden" name="ip" value="192.168.1.1">
            <input type="hidden" name="cmd" value="prepaid-type">
<table id="tab1"><tr><td id="1">
    <button type="button" id="c1">
    1
    </button>
    <input type="checkbox" name="checkAll" id="checkAll">全選
    <input type="checkbox" name="book1" id="book" value="book1">book1
    <input type="checkbox" name="book2" id="book" value="book2">book2
    <input type="checkbox" name="book3" id="book" value="book3">book3
    <input type="checkbox" name="book4" id="book" value="book4">book4
    <input type="checkbox" name="book5" id="book" value="book5">book5
    </td></tr>
    <tr><td id="2">
    <button type="button" id="c2">
    2
    </button>
    <input type="checkbox" name="checkAll" id="checkAll2">全選
    <input type="checkbox" name="book1" id="book" value="book1">book1
    <input type="checkbox" name="book2" id="book" value="book2">book2
    <input type="checkbox" name="book3" id="book" value="book3">book3
    <input type="checkbox" name="book4" id="book" value="book4">book4
    <input type="checkbox" name="book5" id="book" value="book5">book5
    </td></tr>
   </table>
               <input type="submit" name="sbm" value="Submit" 
               class="button primary">
                        </form>
            </div>

Here's my javascript code:

    $("#1 #checkAll").click(function () {
        if ($("#1 #checkAll").is(':checked')) {
            $("#1 input[type=checkbox]").each(function () {
                $(this).prop("checked", true);
            });
        } else {
            $("#1 input[type=checkbox]").each(function () {
                $(this).prop("checked", false);
            });
        }
    });
      $("#2 #checkAll2").click(function () {
        if ($("#2 #checkAll2").is(':checked')) {
            $("#2 input[type=checkbox]").each(function () {
                $(this).prop("checked", true);
            });
        } else {
            $("#2 input[type=checkbox]").each(function () {
                $(this).prop("checked", false);
            });
        }
    });

 $('#c1').on('click', function(){
        var $$ = $(this)
        if( !$$.is('.checked')){
            $('#checkAll').prop('checked', true);
        } else {
            $$.removeClass('checked');
            $$.addClass('unchecked');
            $('#checkAll').prop('checked', false);
        }
    })
     $('#c2').on('click', function(){
        var $$ = $(this)
        if( !$$.is('.checked')){
            $('#checkAll2').prop('checked', true);
        } else {
            $$.removeClass('checked');
            $$.addClass('unchecked');
            $('#checkAll2').prop('checked', false);
        }
    })

This is my fiddle: JSFIDDLE