toggle layers legends drawed in layers "title" property

[andreaordonselli]

Good morning @walkermatt, I'm the current maintainer of qgis2web. As you know, your plugin is integrated into the qgis2web openlayers export. I'm trying to toggle layers legends by inserting a new "active"class, but when I turn on/off one layer the classes I added are removed.

Let me explain better, the legends are visible in the layerwitcher as configured in the title, like this:

var airports = new ol.layer.Vector({
                declutter: false,
                source: jsonSource_airports, 
                style: style_airports,
                popuplayertitle: "airports svg graduated",
                interactive: true,
    title: '<div id="layertitle">airports svg graduated<br />\
    <i class="fas fa-angle-up" id="secondImage"></i><i class="fas fa-angle-down" id="firstImage"></i></div><a class="layerlegend">\
    <img src="styles/legend/airportssvggraduated_1_0.png" /> 9 - 36<br />\
    <img src="styles/legend/airportssvggraduated_1_1.png" /> 36 - 78<br />\
    <img src="styles/legend/airportssvggraduated_1_2.png" /> 78 - 189<br />\
    <img src="styles/legend/airportssvggraduated_1_3.png" /> 189 - 417<br />\
    <img src="styles/legend/airportssvggraduated_1_4.png" /> 417 - 1569<br /></a>'
        }); 

With this javascript code I thought of preventing the click on the title (which now turns the layer on/off) and of adding my click insertion logic for the "active" class

document.addEventListener('DOMContentLoaded', function() {
    const layerswitcherPanel = document.querySelector('.layer-switcher .panel');
    if (layerswitcherPanel) {
        layerswitcherPanel.addEventListener('click', function(event) {
            if (event.target.tagName === 'INPUT' && event.target.type === 'checkbox') {
                return;
            }
            if (event.target.closest('.layer-switcher .panel li #layertitle')) {
                 event.target.classList.toggle('active');
            }
            event.stopPropagation();
            event.preventDefault();
        });
    }
});

The css code will do the rest and this is the result:

before clicking on the title

after clicking on the title

However I encounter this problem:

• When I turn on/off any layer the panel is redrawn and the "active" class inserted with my logic is removed, hiding the legends

after toggle on/off layer

How can I solve it? I would like the active "class", if present, not to be removed from the elements when switching layers on/off. Any advice to fix my code or apply better logic is highly appreciated. Thank you.