Problem with select box for language change

Question

I have a custom select box where my language changes website it works perfectly however I stylized it does not work and does not change the language of my site how can I make it to be stylized and my script recognize it as an action to change the language follows my codes:

JS:

/*Json para mudança do idioma*/
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>
        var arrLang = {
            'en' : {
                'home' : 'Home',
                'sobre' : 'About us',
                'equipe' : 'Team',
                'ferramentas' : 'Tools',
                'exchanges' : 'Supported Exchanges',
                'contato' : 'Contact',
            },
            'pt' : {
                'home' : 'Home',
                'sobre' : 'Quem somos',
                'equipe' : 'Equipe',
                'ferramentas' : 'Ferramentas',
                'exchanges' : 'Exchanges Suportadas',
                'contato' : 'Contato',
            }
            };

            $(function(){
            $('#year').change(function(){
                var lang = $(this).val();

                $('.lang').each(function(index, element){
                    $(this).text(arrLang[lang][$(this).attr('data-key')]);
                });
            });
        });
    </script>

/*select box personalizado*/
    $('select').each(function(){
      var $this = $(this), numberOfOptions = $(this).children('option').length;

      $this.addClass('select-hidden'); 
      $this.wrap('<div class="select"></div>');
      $this.after('<div class="select-styled"></div>');

      var $styledSelect = $this.next('div.select-styled');
      $styledSelect.text($this.children('option').eq(0).text());

      var $list = $('<ul />', {
          'class': 'select-options'
      }).insertAfter($styledSelect);

      for (var i = 0; i < numberOfOptions; i++) {
          $('<li />', {
              text: $this.children('option').eq(i).text(),
              rel: $this.children('option').eq(i).val()
          }).appendTo($list);
      }

      var $listItems = $list.children('li');

      $styledSelect.click(function(e) {
          e.stopPropagation();
          $('div.select-styled.active').not(this).each(function(){
              $(this).removeClass('active').next('ul.select-options').hide();
          });
          $(this).toggleClass('active').next('ul.select-options').toggle();
      });

      $listItems.click(function(e) {
          e.stopPropagation();
          $styledSelect.text($(this).text()).removeClass('active');
          $this.val($(this).attr('rel'));
          $list.hide();
          //console.log($this.val());
      });

      $(document).click(function() {
          $styledSelect.removeClass('active');
          $list.hide();
      });

    });

Html:

<div id="language">
  <select id="year">
      <option value="pt" id="pt">PT</option>
      <option value="en" id="en">EN</option>
  </select>
</div>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active" data-menuanchor="home">
                        <a class="nav-link lang" href="#home" data-key="home">Home</a>
                    </li>

                    <li class="nav-item"  data-menuanchor="quem-somos">
                        <a class="nav-link lang" href="#quem-somos" data-key="sobre">Quem Somos</a>
                    </li>

                    <li class="nav-item"  data-menuanchor="equipe">
                        <a class="nav-link lang" href="#equipe" data-key="equipe">Equipe</a>
                    </li>

                    <li class="nav-item"  data-menuanchor="ferramentas">
                        <a class="nav-link lang" href="#ferramentas" data-key="ferramentas">Ferramentas</a>
                    </li>

                    <li class="nav-item"  data-menuanchor="exchanges">
                        <a class="nav-link lang" href="#exchanges" data-key="exchanges">Exchanges Suportadas</a>
                    </li>

                    <li class="nav-item"  data-menuanchor="contato" data-key="contato">
                        <a class="nav-link lang" href="#contato">Contato</a>
                    </li>
                </ul>
            </div>

Scss:

#language{
    right: 35px;
    text-align: center;
    bottom: 570px;

.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}
.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: $gray;
  width: 43.6px;
  height: 43.6px;
}

.select-styled {
  position: absolute; 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  @include gradient-animation($green, $blue); 
  padding: 8px 0px;
  @include transition(all 0.2s ease-in);
  &:after {
    content:"";
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-color: $gray transparent transparent transparent;
    position: absolute;
    top: 30px;
    right: 0;
    left: 0;
    margin: 0 auto;
  }
}

.select-options {
  display: none; 
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  @include gradient-animation($green, $blue); 
  li {
    margin: 0;
    padding: 12px 0;
    text-indent: 0;
    border-top: 1px solid darken($blue, 10);
    @include transition(all 0.15s ease-in);
    &:hover {
      color: $gray;
      @include gradient-animation($green, $blue); 
    }
    &[rel="hide"] {
      display: none;
    }
  }
}
}