title: Multilingual Website- Language setting needs to be done on every page, how to avoid that?
body: <p>i am designing an interface or an controller and i need to make it accessible to various languages. The interface is safed locally on the device it self.</p>
  <p>I managed to translate the first couple of pages and made it work like i wanted it. except of one Issue:</p>
  <p>so if you are on page one and set the language to english, it changes page one to english. If you are going to the next page which has an english translation it is back in the default language and you need to click english again.</p>
  <p>is there a way to fix that within the function i used?</p>
  <p>here is a fiddle so you can have a look at my code:</p>
  <p><a href="https://jsfiddle.net/v29Lfar6/" rel="nofollow noreferrer">https://jsfiddle.net/v29Lfar6/</a></p>
  <p>if i need to provide anything else or clarify the problem in more depth just let me know. Thank you in advance![JsFiddle</p>
  
  <pre class="lang-css prettyprint-override"><code>.container_buttonp1{
      text-align: center;
      margin-left: -20px;
      margin-right: -20px;
      
  }
  .button{
      display:inline-block;
      background-color: #f4f4f4;
      color: #105ea6;
      border-radius: 8px;
      padding: 5px 2,5px;
      width: 100px;
      text-align: center;
      font-size: 12px;
      border: 2px grey solid;
      text-decoration: none;
      margin: 0 20px;
      
  }
  .button:hover{
      border: 2px grey solid;
      padding: 5px 2,5px;
      width: 100px;
      background-color: #105ea6;
      color: #f4f4f4;
      border-radius: 8px;
  }
  footer {
      position: absolute;
      height: 10%;
      width: 100%;
      background-color: #f4f4f4;
  }
  p.copyright{
      position: absolute;
      width: 100%;
      color:  #105ea6;
      line-height: 30px;
      font-size: 1.0em;
      text-align: center;
      bottom:0;
  }
  .form{
      text-align: center;
  } 
  .nav{
      height: 40px;
      background-color: #105ea6;
      height: 100px;
      width: 100px;
  
      
  }
      
  nav ul{
      color: #105ea6;
      list-style: none;
      text-align: center;
      font-size: 25px;
  
  }
  nav ul li a{
      color: #105ea6;
      display:inline-block;
      text-decoration: none;
      text-align: center;
      border: 2px grey solid;
      width: 250px;
      padding: 20px;
      border-radius: 8px;
      cursor: pointer;
  
  
  }
  nav ul li a:hover{
      border: 2px grey solid;
      padding: 20px;
      width: 250px;
      background-color: #105ea6;
      color: #f4f4f4;
      border-radius: 8px;
  }
  .header_navbar{
      font-size: x-large;
      text-align: center;
      padding-left: 40px;
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;de&quot;&gt;
      &lt;div id=&quot;content&quot;&gt;
          &lt;img src=&quot;IMAGES_AYNU/elsner_logo1.svg&quot; width=&quot;150&quot; height=&quot;150&quot;/&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;body&gt;
          &lt;head&gt;
              &lt;script src=&quot;https://kit.fontawesome.com/9cef10a72a.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
              &lt;meta charset=&quot;UTF-8&quot;&gt;
              &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
              &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
          &lt;title&gt;Hauptmenü&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;CSS_AYNU/AYNU.Style.css&quot;&gt;
          &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      var arrLang = {
        'en': {
          'wateringzones': 'Wateringzones',
          'sensors': 'Sensors',
          'back': 'Back',
          'mainmenue': 'Main menu',
          'help': 'Help'
        },
        'de': {
          'wateringzones': 'Bewässerungszonen',
          'sensors': 'Sensoren',
          'back': 'Zurück',
          'mainmenue':'Hauptmenü',
          'help': 'Hilfe'
        }
      };
  
      // Process translation
      $(function() {
        $('.translate').click(function() {
          var lang = $(this).attr('id');
  
          $('.lang').each(function(index, item) {
            $(this).text(arrLang[lang][$(this).attr('key')]);
          });
        });
      });
    &lt;/script&gt;
          &lt;/head&gt;
          &lt;div class=&quot;header_navbar&quot;&gt;
              &lt;header&gt;
                  &lt;button id=&quot;en&quot; class=&quot;translate&quot;&gt;English&lt;/button&gt;
                  &lt;button id=&quot;de&quot; class=&quot;translate&quot;&gt;Deutsch&lt;/button&gt;
                  &lt;br&gt;
                  &lt;h1&gt;&lt;span class=&quot;lang&quot; key=&quot;mainmenue&quot;&gt;Hauptmenü&lt;/span&gt;  &lt;i class=&quot;fas fa-bars&quot;&gt;&lt;/i&gt;&lt;/h1&gt;
                      
              &lt;/header&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class=&quot;navebar&quot;&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li class=&quot;navbar&quot;&gt;&lt;a class=&quot;lang&quot; href=&quot;AYNU_WATERINGZONES.html&quot; key=&quot;wateringzones&quot;&gt;Bewässerungszonen&lt;/a&gt;&lt;/li&gt;
                      &lt;br&gt;
                      &lt;li class=&quot;navbar&quot;&gt;&lt;a class=&quot;lang&quot; href=&quot;AYNU_SENSORS.html&quot; key=&quot;sensors&quot;&gt;Sensoren&lt;/a&gt;&lt;/li&gt;
                      &lt;br&gt;
                      &lt;li class=&quot;navbar&quot;&gt;&lt;a class=&quot;lang&quot; href=&quot;AYNU.Structure.html&quot; key=&quot;back&quot;&gt;Zurück&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;br&gt;
         
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>