I'm using bootstraps collapsible containers on a website to display some info, I am also using ion-icons to have a + & - to indicate when the container is open or closed, for some reason I am struggling to target the icons to be able to change them, I've tried this thus far.

html

<div class="accordion-item">
                <div class="accordion-header w-100" id="headingOne">
                    <a class="collapsed w-100 d-flex justify-content-between align-items-center" id="toggle" data-bs-toggle="collapse" data-bs-target="#collapse-One" aria-expanded="true" aria-controls="collapse-One">
                        Title <ion-icon itemid="iconChange" name="add"></ion-icon>
                    </a>
                </div>
                <div id="collapse-One" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionProductInfo">
                    <div class="accordion-body">
                        Info
                    </div>
                </div>
            </div>

js

var myCollapsible = document.getElementById('#toggle')
        myCollapsible.addEventListener('show.bs.collapse', function () {
            var icon = $("#iconChange");

            icon.attr('name', 'remove-outline');
            console.log(icon[0]);
        });

I know this is only to change it one way so far but I cant even get a message out of the console log.