title: Performing actions on element with non-unique class name
body: <p>--Before I begin, I should say I'm trying to accomplish this with no libraries. Sorry jQuery--</p>
  
  <p>In a general sense, I'm wondering the best way to use event listeners on a list when no item in the list has a unique classname or id. More specifically, I have this:</p>
  
  <p>Currently, I have a WinJS listView that is data-bound like in <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx" rel="nofollow">this</a> guide. As you can see, no item in the list has a unique element id or classname. This is causing me an issue because I want to add a click listener to each one, so that when you click a certain item in the list, <a href="http://msdn.microsoft.com/en-us/library/windows/apps/br212658.aspx" rel="nofollow">this</a> behavior happens (as shown in the gif). I need a sub menu to appear underneath the item in the list that corresponds to the appropriate item in the list.</p>
  
  <p>This would be easy enough if they all had unique ids and/or classnames. But since they don't, I was thinking when somebody clicks on an item, you have to get which one it is and then add a classname to all the items in the list beneath the one you clicked so that you can move them down using the WinJS .createExpandAnimation function. Then once the submenu has been closed, strip off all of the added classnames. Is that really the best way to do it?</p>
  
  <p>I'm open to completely removing the listView, but I'd like a way to data-bind in a similar fashion. Is there a way to do this not using the listView (or another library) that would make life easier? </p>
  
  <p>Edit: 
  My code is in an identical format to this that Microsoft provides in their walkthrough.</p>
  
  <pre><code>&lt;div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template"&gt;
      &lt;div style="width: 150px; height: 100px;"&gt;
  
          &lt;!-- Displays the "picture" field. --&gt;
          &lt;img src="#" style="width: 60px; height: 60px;" 
               data-win-bind="alt: title; src: picture" /&gt;
          &lt;div&gt;
  
              &lt;!-- Displays the "title" field. --&gt;
              &lt;h4 data-win-bind="innerText: title"&gt;&lt;/h4&gt;
  
              &lt;!-- Displays the "text" field. --&gt; 
              &lt;h6 data-win-bind="innerText: text"&gt;&lt;/h6&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;       
  
  &lt;div id="basicListView" data-win-control="WinJS.UI.ListView" 
      data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
          itemTemplate: select('#mediumListIconTextTemplate')}"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>where dataSource is defined like this:</p>
  
  <pre><code> (function () {
  "use strict";
  
  var dataArray = [
  { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
  { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" }
  ];
  
  var dataList = new WinJS.Binding.List(dataArray);
  
  // Create a namespace to make the data publicly
  // accessible. 
  var publicMembers =
      {
          itemList: dataList 
      };
  WinJS.Namespace.define("DataExample", publicMembers); 
  </code></pre>
  
  <p>Honestly, I'm not even sure this will work with a WinJS listView, so I may have to change this entirely to use an html list or something like that. </p>