title: Not able to find data-id when selecting element
body: <p>Apologies in advance I feel as if this is a very simple solution and I am in the middle of a severe brain fart. I am simply trying to grab the data-id of an item I am clicking using ES6 syntax but no matter which way I run it I keep getting undefined.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="list-item" data-id="item-1"&gt;Click me&lt;/li&gt;
      &lt;li class="list-item" data-id="item-2"&gt;Click me&lt;/li&gt;
      &lt;li class="list-item" data-id="item-3"&gt;Click me&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>let $el = $('ul');
  
  class List {
      constructor($el) {
          this.$el = $el;
  
          this.$listItem = $el.find('li');
  
          this.attachHandlers();
      }
  
      attachHandlers() {
          this.$listItem.on('click', () =&gt; {
              var data = $(this).attr('data-id');
              console.log(data);
          });
      }
  }
  
  const _init = () =&gt; {
      if ($el.length) {
          $el.each((i, v) =&gt; {
              new List($(v));
          });
      }
  };
  
  _init();
  </code></pre>
  
  <p>Ive simplified the code down as much as possible, anybody see what I am doing wrong here?</p>