Each checkbox shows up twice

Set up:

• jQuery 3.2.1
• Semantic UI 2.1
• Chrome

HTML (based on http://ift.tt/2pHD25P):

<div id="checkboxes">
    <div class="ui checkbox">
        <input type="checkbox" name="checkboxes" value="checkbox1">
        <label>Branch</label>
    </div>
    <div class="ui checkbox">
        <input type="checkbox" name="checkboxes" value="checkbox2">
        <label>Branch</label>
    </div>
    <div class="ui checkbox">
        <input type="checkbox" name="checkboxes" value="checkbox3">
        <label>Branch</label>
    </div>
    ...
</div>

*They are all initially checked.** The user unchecks the ones they want to deactivate.

In my JS file, I'm using the following function to get which checkboxes are checked:

$('input:checkbox[name=checkboxes]:checked').each(function () {
        // Do something with them
    });

However, each checkbox shows up twice (once in the new state - checked or unchecked, and once in the original state - all checked). This confuses my logic after this, making the checkmark pointless.

I went into Chrome Developer Tools, and used the same selector in the console. Got this back:

input#checkbox2, input#checkbox3, input#checkbox1, input#checkbox2, input#checkbox3

(I had unchecked checkbox1)

Any ideas on why it would show up twice, or what I'm missing here?