title: GTM Custom Variables from li attributes
body: <p>(Preface: I am not a coder, so if I've misrepresented something here please let me know and I will try to correct or provide more info.)</p>
  
  <p>We have a series of search results presented to users in an unordered list with a parent class followed by a lot of useful metadata, including the list position. Something like this:</p>
  
  <pre><code>&lt;li class="article-panel" data-articletype="knowledgebase" data-list-position="1"&gt;...&lt;/li&gt;
  &lt;li class="article-panel" data-articletype="blog" data-list-position="2"&gt;...&lt;/li&gt;
  &lt;li class="article-panel" data-articletype="news" data-list-position="3"&gt;...&lt;/li&gt;
  </code></pre>
  
  <p>I'm trying to create a series of variables to allow us to use the metadata in events, so that we can track the list position of a clicked object as the event's label or value. The problem I'm running into is that because each of these objects uses the same class name, the variable is always returning only the first set of values, no matter which object I click on. </p>
  
  <pre><code>Variable configuration: 
  DOM Element
  CSS Selector
  Element Selector = .article-panel
  Attribute Name = data-articletype
  </code></pre>
  
  <p>Using the example, the above variable is always returning "knowledgebase", even when I click on the news or blog article (and the same goes for data-list-position always returning "1".)</p>
  
  <p>How do I specify that I want to return the variables of the object clicked without always referring only to the first instance of that class in the DOM? </p>