Select All Checkbox is not working as it must be working

I am trying to implement select all checkbox and its working fine the only problem is that when I Deselect one of the checkbox from all checkboxes the select all checkbox stop working on that specific checkbox

This is my code

JS code

<script>
$(document).ready(function() {
    $("#BulkSelect").click(function() {
        $('.Bulkers').attr('checked', this.checked);
    });
    $('.Bulkers').change(function() {

        if ($(".Bulkers").length == $(".Bulkers:checked").length) {
            $("#BulkSelect").attr("checked", "checked");
        } else {
            $("#BulkSelect").removeAttr("checked");
        }
    });
});

</script>

HTML code

<table id="data-table" class="table table-striped table-bordered table-hover">

                        <thead>

                            <tr>
                                <th><input type="checkbox" id="BulkSelect" ></th>

                                <th>Hater's Name</th>

                                <th>Hater's Profile Link</th>

                                <th>Victim's Name</th>

                                <th>Victim's Post Link</th>

                                <th>Country</th>

                                <th>Source</th>

                                <th>
                                    <div class="btn-group" role="group">

                                        <button id="btnGroupDrop3" type="button" class="btn btn-success dropdown-toggle"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                            Action

                                        </button>


                                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop3"
                                            x-placement="bottom-start">



                                            <form method="post" id="BulkDelete"
                                                action="">
                                                @csrf
                                                <button type="submit" class="dropdown-item">Delete</button>
                                                <button type="button" onclick="BulkApprove()"
                                                    class="dropdown-item">Approve</button>
                                            </form>




                                        </div>


                                    </div>
                                </th>

                            </tr>

                        </thead>

                        <tbody>

                            @php($i = 0)

                            @foreach($tables as $table)

                            <tr class="gradeX">

                                <td><input type="checkbox" name="ids[]" form="BulkDelete"
                                        class="Bulkers" value=""></td>

                                <td></td>

                                <td></td>

                                <td></td>

                                <td></td>

                                <td></td>

                                <td></td>

                                <td>

                                    <div class="btn-group" role="group">

                                        <button id="btnGroupDrop3" type="button" class="btn btn-primary dropdown-toggle"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                            Action

                                        </button>


                                    </div>

                                </td>

                            </tr>



                            @endforeach





                        </tbody>



                    </table>

Note : I am using laravel framework so don't react on php code..