Opencart 3.0.3 responsive mobile folding menu stays open after clicked on an ahref

Question

I have a responsive menu. Toggle mechanism is via the CSS checkbox and a minor JQuery script that lets the other branches of the menu branches fold. Opencart has for every category an ID, which I pass in the Twig to every menu. When A customer clics on an category item, the whole DOM is of course loaded new as the URL of the category changes. I grabed and sliced the URL and got my self the last three digits from the url /category&path=231_435. As I need just the 435. I packed theese together with the word 'toggler' into a variable var selector. When using the Firefox DOM Console these two commands: $('#tm').prop("checked",true); $('#toggle435').prop("checked",true); work in the console as expected. My syntax and escaping/passing variables is simply killing me, can someone help me. Im just trying to get the category menu be opened there where the customer clicked. Here is the twig with the Jquery. I susspect that I am having a syntax trouble around here: $('#' + selector).prop("checked",true);

Here is the Twig:

{% if categories %}
<div class="container sticky_menu"> 
    <nav id="menu">
    <label for="tm" id="toggle-menu">{{ text_category }} <span class="drop-icon">▾</span></label>
    <input type="checkbox" id="tm">
        <ul class="main-menu clearfix" >
             {% for category in categories %}
                  {% if category.children %}
                    <li>
                        <a>{{ category.name }}
                        <span class="drop-icon">▾</span>
                        <label title="Toggle Drop-down" class="drop-icon" for="toggle{{ category.category_id }}">▾</label>
                        </a>
                         <input type="checkbox" id="toggle{{ category.category_id }}" class="switch">
                        {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
                        <ul class="sub-menu">
                            {% for child in children %}
                            <li>
                                <a href="{{ child.href }}"> {{ child.name }}
                                <span class="drop-icon">▾</span>
                                <label title="Toggle Drop-down" class="drop-icon" for="toggle{{ child.category_id }}">▾</label>
                                </a>
                                <input type="checkbox" id="toggle{{ child.category_id }}" class="switch2">
                                {% if child.children %}
                                <ul class="sub-menu sub-sub-menu">
                                     {% for children in child.children %}
                                    <li>
                                        <a href="{{ children.href }}">{{ children.name }}</a>
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                            </li>
                            {% endfor %}
                        </ul>
                        {% endfor %}
                    </li>
                  {% endif %}
             {% endfor %}
        </ul>
    </nav>     
</div>
<script>
    $(document).ready(function(){
            var pageURL = $(location).attr("href");
            var lastSeg = (pageURL.slice(pageURL.length - 3));
            var toggler = "toggle";
            var selector = toggler + lastSeg;       
            $('#tm').prop("checked",true);  
            $('#' + selector).prop("checked",true);
            alert(selector); 
        });
</script>
<script>
var items = $('.switch');
items.on('click', function(){
  items.not($(this)).prop('checked', false);
});
</script>
<script>
var items2 = $('.switch2');
items2.on('click', function(){
  items2.not($(this)).prop('checked', false);
});
</script>   
{% endif %}

Thanks in advance.