Bootstrap 5 collapse with Checkbox, stopPropagation() not working

I thought I had found the answer to my question here, but it’s not working for me: prevent bootstrap collapse from collapsing

My content is dynamically created, so I used the $(document).on syntax, so I’m not sure if that’s the issue? Or something else with how the event propagates?

I also tried taking the input outside of the button, but it breaks the layout. Should I do that and just try to fix the layout issue? I’d rather have it looking good and figure out how to stop the propagation…

Here is my js code:

//handle the file accordion checkbox click event
$(document).on('click', '.program_checkbox', function(e) {
    e.stopPropagation(); 
});

And the rendered HTML

<div id="fileDownloadDiv">
    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading6"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="true" aria-controls="collapse6"><input type="checkbox" class="form-check-input program_checkbox" value="Maine Ecological Reserves Program" checked="">Maine Ecological Reserves Program</button></h2>
        </div>
        <div id="collapse6" class="accordion-collapse ml-4 collapse show" aria-labelledby="heading6" data-bs-parent="#accordionExample">
            <div class="form-group form-check pl-4"><input type="checkbox" class="form-check-input package_checkbox" id="package243" value="program_data/6/packages/1646756076.zip" checked=""><label class="form-check-label" for="package243">1646756076.zip</label></div>
            <div class="form-group form-check pl-4"><input type="checkbox" class="form-check-input script_checkbox" id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked=""><label class="form-check-label" for="scriptundefined">MEER_munger.py</label></div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading9"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse9" aria-expanded="true" aria-controls="collapse9"><input type="checkbox" class="form-check-input program_checkbox" value="Vermont State Lands Continuous Forest Inventory">Vermont State Lands Continuous Forest Inventory</button></h2>
        </div>
        <div id="collapse9" class="accordion-collapse collapse show ml-4" aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project</div>
    </div>
</div>