I am trying to create some website functionality where there are two radio buttons "Yes" and "No", and when "Yes" is selected, it expands the collapsible portion of HTML, and when "No" is selected, it collapses it. The issue I am running into is if you continuously click the "Yes" radio button, it will expand and collapse it. I only want one or the other depending on which button is selected. This is what I have come up with:

HTML:

        <div class="row gy-3">
            <label><b>Have you ever applied for a job with any of the companies listed above as an employee or as a temporary employee? *</b></label>
                <div class="col-md-4">
                    <div class="form-check">
                        <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" value="Yes" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" required>
                        <label class="form-check-label" for="validationFormCheck2">Yes</label>
                    </div>
                    <div class="form-check mb-3">
                        <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" value="No" required>
                        <label class="form-check-label" for="validationFormCheck3">No</label>
                        <div class="invalid-feedback">More example invalid feedback text</div>
                    </div>
                    <div class="collapse" id="collapseExample">
                        <div class="card card-body">
                            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                        </div>
                    </div>
                </div>
            </div>

JS:

$('#employmentForm input').on('change', function() {
   var value = $('input[name=radio-stacked]:checked', '#employmentForm').val();
   if (value === "Yes") {
       var myCollapse = document.getElementById('collapseExample')
       var bCollapse = new bootstrap.Collapse(myCollapse, {
         show: true
       })
   } else if (value === "No") {
       var myCollapse = document.getElementById('collapseExample')
       var bsCollapse = new bootstrap.Collapse(myCollapse, {
           dispose: true 
       })
   }
});