There is an element by class name unlock and by on click event the innerHTML of that will be changed by another svg icon. it works good and replaced by new svg icon.

<div class="Panel card" id="leftSidebarForm">
        <div class="Panel card-subtitle">
            <div class="column">
                <div class="unlock">
                    <svg>1</svg>
                </div>
                <div class="Panel">
                    <svg>1</svg>
                </div>
                <div class="unchain">
                    <svg>2</svg>
                </div>
                <div class="Panel">
                    <svg>3</svg>
                </div>
            </div>
        </div>
    </div>

But I define an EventListener on document to close the above element when click on outside.

document.addEventListener("click", function (event) {
    
    if (document.getElementById('leftSidebarForm') != null &&
        !event.target.closest('#leftSidebarForm')  &&
        !event.target.closest('#left-sidebar-menu')
    ) {

      // do something

    }
});

The problem occur by click on svg 1 to change the icon, it close the leftSidebarForm while it is its parent and must not close the leftSidebarForm. By click on svg icon to change its content this snippet code return null

event.target.closest('#leftSidebarForm')

I think it's because by changing innerHTML of element we remove it from dom and event.target.closest('#leftSidebarForm') return null because that svg not exist.

How can I solve that problem ?