title: Javascript - Referencing certain HTML elements inside of a loop
body: <p>I'm making a simple Javascript menu that switches between tabs containing mostly HTML forms and text.
  To this end, I've used the following code to assign on-click attributes to list elements changing the styling settings of classes:<br>
  <a href="http://jsfiddle.net/NHKZL/" rel="nofollow">http://jsfiddle.net/NHKZL/</a>
  <br>
  The problem in this case is that the code tracks menu content  by going through the list of classes to find elements to open/close (container>.class). This works fine when using plain text in each of the tabs but less so when using different content such as php echoes and loops. I assume that this is due to JS considering some of these tags classes.
  <br>
  This is the line of code:</p>
  
  <pre><code>var target = document.querySelector('.container&gt;.' + e.target.classList[0]);
  </code></pre>
  
  <p>the part in particular that I am looking for an alternative to is:</p>
  
  <blockquote>
    <p>classlist[0]</p>
  </blockquote>
  
  <p>The person who posted the code pointed out this weakness and suggested using data-* to track the elements that I wish to affect, but I can't seem to figure out how this affects the remainder of the syntax in this particular line. The other half of my solution currently consists of adding data-* attributes to the classes inside of the container class. <br>
  Any other suggestions on how to do this are welcome.</p>