Laravel: Templates Blades, Keep a modification made by a script after the view is extended

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cm-menu-scroller">
                          <ul class="cm-menu-items">
                            <!-- Melhorias: dependendo de qual eu clicar quero que a classe active fique ativa -->
                            <div id="Myli">

                              <!-- contador é um elemento que ouve o clique do mouse -->
                              <li class="contador active"><a href="home" class="sf-house">Home</a></li>
                              <li class="contador"><a href="{{route('Orcamentos.index')}}" class="sf-money">Orçamentos</a></li>
                              <li class="contador"><a href="cadastrarItens" class="sf-notepad">Cadastrar</a></li>
                              <li class="contador"><a href="#" class="sf-post-it">Ativdades</a></li>
                              <li class="contador"><a href="#" class="sf-pencil">Pedidos</a></li>
                              <li class="contador"><a href="#" class="sf-brick">Peças</a></li>
                              </div>

                              <script type="text/javascript">
                              // Capturar os elementos li dento da div Myli
                              var liContainer = document.getElementById("Myli");
                              // Capturar todos os li com a class="contador" que estiver dentro da div
                              var li = liContainer.getElementsByClassName("contador");

                              //passar por todos os li e adicionar o active na class que foi clicada por ultimo
                              for (var i = 0; i < li.length; i++) {
                                li[i].addEventListener("click", function() {
                                  var current = document.getElementsByClassName("active");
                                  current[0].className = current[0].className.replace(" active", "");
                                  this.className += " active";
                                });
                              }

                              </script>

                          </ul>
                      </div>

I have a script that adds a class="active" in the element that was clicked in the main view, which serves as the basis for the whole system, which works perfectly, but when I extend(@extends) this view the modification made by the reset script.

Can I keep the modification made in class="active" in the other views that extends this main?

code: