Add and remove active class in navigation menu

I'm working on symfony and I have my navigation menu on the layout page and I would like to know how I can put it active depending on the page I'm on this is the menu                        Start                     

                    <a href=""><i class="zmdi zmdi-laptop-chromebook"></i>Informática<i class="zmdi zmdi-caret-down pull-right"></i></a>
                    <ul>
                        <li><a href="{{ path('informatica_index') }}">Estadísticas</a></li>
                        <li class="navigation__sub">
                            <a href="#">Administración</a>
                            <ul>
                                <li><a href="">--Proxmox(Postfix, squid)</a></li>
                                <li><a href="">--Proxmox 2(WSUS)</a></li>
                                <li><a href="">--Proxmox 3(Server-2016)</a></li>
                                <li><a href="">--Proxmox 4(Server-2016-pm, antivirus, etc)</a></li>
                                <li><a href="">--Proxmox 5(BDServer, sistema, etc)</a></li>
                                <li><a href="">--Proxmox 6(Servidor Anastasio Cárdenas)</a></li>
                            </ul>
                        </li>
                        <li class="navigation__sub">
                            <a href="#">Seguridad Informática</a>
                            <ul>
                                <li><a href="">--SawMill</a></li>
                                <li><a href="">--Manual de Seguridad Informática</a></li>
                                <li><a href="{{ path('expedientes_index') }}">--Expedientes de los equipos</a></li>
                                <li><a href="{{ path('expedientes_tipos_componentes') }}">--Expedientes clasificados por tipo de componente</a></li>
                                <li><a href="{{ path('componentesdeequipos_index') }}">--Listado de los componentes de los equipos</a></li>
                                <li><a href="#">--SawMill</a></li>
                                <li><a href="http://172.25.1.3/sqstat/sqstat.php?refresh=6&config=0">--SqStat</a></li>
                                <li><a href="https://squidproxy.plantamec.co.cu/sqstat/sqstat.php?refresh=6&config=0">--SqStat en SQUIDProxy17</a></li>
                                <li><a href="https://squidproxy.plantamec.co.cu/sarg/">--SARG en SQUIDProxy17</a></li>
                                {#{% if is_granted('ROLE_SUPER_ADMIN') %}
                                <li> <a href="">Existencias UEB Anastasio Cárdenas</a> </li>
                                <li> <a href="">Activo Fijo UEB Anastasio Cárdenas</a> </li>
                                {% endif %}
                                #}
                                <li><a href="">--Chequeo de host, dns e ip de las PC (Demora aprox 12 min en generar informe)</a></li>
                            </ul>
                        </li>

this is what I did but it does not work for me

<script>

        $(function() {

            // elementos de la lista
            var menues = $(".navigation li.active");


            // manejador de click sobre todos los elementos
            menues.click(function() {
                // eliminamos active de todos los elementos
                menues.removeClass("navigation__active");
                // activamos el elemento clicado.
                $(this).addClass("navigation__active");
            });

            var sub_menu = $(".navigation__sub li.active");
            // manejador de click sobre todos los elementos
            sub_menu.click(function() {
                // eliminamos active de todos los elementos
                sub_menu.removeClass("navigation__sub--active navigation__sub--toggled");
                // activamos el elemento clicado.
                $(this).addClass("navigation__sub--active navigation__sub--toggled");
            });


        });
    </script>