title: jQuery selectors building with this
body: <p>So I have this html tag:</p>
  
  <pre><code>&lt;h2 id="2"&gt;
    &lt;a class="toggle" data-toggle="collapse" data-target="#sites"&gt;Websites &lt;i class="fa fa-chevron-circle-down"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/h2&gt;
  </code></pre>
  
  <p>and then this jquery function:</p>
  
  <pre><code>$("#1 a, #2 a").click(
      function() {
          if ($(this + "i").hasClass('fa-chevron-circle-down')) {
              $(this + "i").removeClass('fa-chevron-circle-down').addClass('fa-chevron-circle-up');
          } else {
              $(this + "i").removeClass('fa-chevron-circle-up').addClass('fa-chevron-circle-down');
          }
      }
  );
  </code></pre>
  
  <p>The idea is that when you click on the html link it will change the arrow's direction. This does work but the problem is it changes every icon on the page to that icon.</p>
  
  <p>So for example if pressed the html above that has fa-chevron-circle-down on it will change to fa-chevron-circle-up but will also change every other icon on my page regardless of the what icon it has to fa-chevron-circle-up. So how can i improve my function to not do this? I'm not seeing why this is happening so if someone would be kind to explain whats happening. Thank you!</p>
  
  <p><a href="https://jsfiddle.net/xyeec6x6/1/" rel="nofollow">https://jsfiddle.net/xyeec6x6/1/</a></p>