title: How to select this attribute with a specific class - jquery
body: <p>I have jquery that looks like:</p>
  
  <pre><code>jQuery(document).ready(function($){
      $(".lmls").click(function(){
          var groupid = $('span#gid').attr('value');
          $("#otherpaths"+groupid).toggle();
          // alert(groupid);
      });
  }
  </code></pre>
  
  <p>I'm trying to show/hide based on the class <code>.lmls</code> :</p>
  
  <pre><code>    &lt;div class="lmls"&gt;
      &lt;img src="img/pathway_icon.png" align="center" width="40px" height="40px"&gt; Leads to other pathways
      &lt;/div&gt;
  
  &lt;div class="otherpaths" id="otherpaths5" style=""&gt;
      &lt;span style="display: none;" id="gid" value="5"&gt;&lt;/span&gt;
          &lt;div class="grouppath" id="grouppath1"&gt;
          &lt;a href="path1.php"&gt;Link1&lt;/a&gt; &lt;/div&gt;
          &lt;div class="grouppath" id="grouppath2"&gt;
              &lt;a href="path2.php"&gt;Link2&lt;/a&gt; 
          &lt;/div&gt;
          &lt;div class="grouppath" id="grouppath3"&gt;
              &lt;a href="path3" target="_blank"&gt;Link3&lt;/a&gt; 
          &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;div class="lmls"&gt;
      &lt;img src="img/pathway_icon.png" align="center" width="40px" height="40px"&gt; Leads to other pathways
      &lt;/div&gt;
  
  &lt;div class="otherpaths" id="otherpaths6" style=""&gt;
      &lt;span style="display: none;" id="gid" value="6"&gt;&lt;/span&gt;
          &lt;div class="grouppath" id="grouppath1"&gt;
          &lt;a href="path1.php"&gt;Link1&lt;/a&gt; &lt;/div&gt;
          &lt;div class="grouppath" id="grouppath2"&gt;
              &lt;a href="path2.php"&gt;Link2&lt;/a&gt; 
          &lt;/div&gt;
          &lt;div class="grouppath" id="grouppath3"&gt;
              &lt;a href="path3" target="_blank"&gt;Link3&lt;/a&gt; 
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works by the value of <code>span</code> tag included in each <code>.otherpaths</code> .
  These values are repeated multiple times in a single page.</p>
  
  <p>The problem is, when I click on one of my <code>.lmls</code> classes it doesn't show/hide the right <code>.lmls</code> class , it just shows the first - since my second line of my <code>js</code> is just looking for <code>.lmls</code>, and <code>.lmls</code> occurs multiple times in the same page.</p>
  
  <p>How can I accomplish this?</p>
  
  <p>Thank you.</p>