Good morning allI have a problem and I ask for your help.

I have a bootstrap accordion to which I dynamically add content.Once the content has been added, the click that should drop the list does not work. I don't understand where the problem is coming from, I ask for your help.

Html code :

<li>
 <ul class="collapsible collapsible-accordion" id="menu">
    <li>
        <a class="collapsible-header waves-effect pl-2 arrow-r active"><strong>Item</strong><i class="fas fa-angle-down rotate-icon"></i></a>
        <div class="collapsible-body">
            <ul>
                <li><a class="pl-4">Item1</a></li>
                <li><a class="pl-4">Item2</a></li>
                <li><a class="pl-4">Item3</a></li>
            </ul>
        </div>
    </li>
</ul>

Code to add list item :

function add_item(){            
    $("#menu").append('<li>'
        +'<a class="collapsible-header waves-effect pl-2 arrow-r">Autre<i class="fas fa-angle-down rotate-icon"></i></a>'
        +'<div class="collapsible-body">'
            +'<ul>'
                +'<li><a class="pl-4">Item1</a></li>'
                +'<li><a class="pl-4">Item2</a></li>'
            +'</ul>'
        +'</div>'
    +'</li>');
};

example

Help please