title: Find closest span element and change the CSS Class
body: <p>I have the following on my page </p>
  
  <pre><code>&lt;h5 class="text-center" id="findStore" style="width:260px"&gt;
      &lt;a data-toggle="collapse" data-parent="#accordion" href="#@item.ProductId" aria-expanded="true" aria-controls="@item.ProductId" style="color: @item.ProductTextColor;font-size:19px;text-decoration: none;" class="text-center"&gt;
           &lt;span class="text-center" style="margin-left:14%"&gt;FIND A STORE&lt;/span&gt; 
           &lt;span id="chevvy" class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;/h5&gt;
  </code></pre>
  
  <p>What I would like to happen is when the user clicks "Find Store" the span tag with the Id chevvy needs to be referenced and I need to change the class chevron-down to chevron-up which I'm trying to do with the following code</p>
  
  <pre><code>$('h5:not(#nutritionInfo)').click(function () {
  
  if ($(this).find('span').hasClass("glyphicon glyphicon-chevron-down")) {
      $(this).find('span').removeClass("glyphicon glyphicon-chevron-down");
      $(this).find('span').addClass("glyphicon glyphicon-chevron-up");
  } else {
      $(this).find('span').removeClass("glyphicon glyphicon-chevron-up");
      $(this).find('span').addClass("glyphicon glyphicon-chevron-down");
  }
  });
  </code></pre>
  
  <p>But with the above code, it reference's "Find Store" and applies a chevron to it so it displays two.</p>
  
  <p>How can I reference the other span tag with the Id chevvy and change the chevron on it?</p>