title: Jquery each toggleClass
body: <p>So, i'm using a foreach that generates "li's" in a menu. Currently there are only two "li's". This menu becomes thiner when you click on a button and i wanted to decrease the font-size when this happens.</p>
  
  <p>I've tried using the toggleClass() function inside an each() function to do this but only the first "li" toggles the class, the second remais the same.</p>
  
  <pre><code>foreach ($results as $result){
                         $local = $result['local'];
                     echo "&lt;li&gt;&lt;a class='clsPostData1' data-local='".$result['local']."' data-salaid='".$result['salaid']."' data-salakey='".$result['salakey']."'href='#'&gt;&lt;span id='idfontsala'&gt;".$local."&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;";
                     }
  </code></pre>
  
  <p>I'm using the "idfontsala" ID inside a span.</p>
  
  <pre><code>&lt;script&gt;
  
        $(document).ready(function(){
    $('.sidebar-toggle').click(function(){
      $('#idfontsala').each(function(){
        $(this).toggleClass('classfontsala');
      });
    });
  });
  
    &lt;/script&gt;
  </code></pre>
  
  <p>This is what is happening : <a href="https://i.imgsafe.org/34d4f934b5.png" rel="nofollow noreferrer">https://i.imgsafe.org/34d4f934b5.png</a></p>