Select all checkbox only works some of the time

I have a form with checkboxes, along with a hidden select all button inside the form. I use jquery to listen for a button click outside the form, and then "click" the hidden button element to select all. Sometimes the page loads up and I click the button and it works perfectly. You can click it multiple times and they all check and uncheck as intended. The form submits perfectly.

Other times, however, the page will load up and I click the button and nothing happens. They don't check no matter how many times I click. I've found this happens a lot if the page sits for more than maybe 10 seconds without me doing anything. But it also can happen on page load. I can't understand why. Is there an error in my code somewhere that I'm just not seeing?

<button id="selectAll" class="btn btn-secondary my-2 my-sm-0"
                type="button" name="selectAll">Select All</button>


<form>
<input type="checkbox" id="1"><label for="1" class="choice">ABC</label>
<input type="checkbox" id="2"><label for="2" class="choice">DEF</label>
  (....etc.....)

<input type="checkbox" id="select-all" style="display: none;">
            <input type="submit" style="display: none;">

        </form>

$(document).ready(function(){
    $('#select-all').click(function(event) {
        if(this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function() {
                this.checked = true;
                $('label.choice').toggleClass("choice-text-color");
            });
        } else {
            $(':checkbox').each(function() {
                this.checked = false;
                $('label.choice').toggleClass("choice-text-color");
            });
        }
     });

    $("#selectAll").click(function() {
            $('#select-all').click()
    });
});