title: Get ID of clicked element Vanilla JS
body: <p>I have 7 <code>&lt;li&gt;</code> elements and when I click on someone, I would like to log name of ID, this is working, but only for first element, and always alerting <code>tab-1</code> , when click on <code>tab-5</code> it's doesn't work, hmmm what is problem there</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="tabs is-fullwidth"&gt;
    &lt;!-- Tabs navigation menu --&gt;
    &lt;ul&gt;
      &lt;li id="tab-1" class="tabs-heading is-active"&gt;
        Tab 1
      &lt;/li&gt;
      &lt;li id="tab-2" class="tabs-heading"&gt;
        Tab 2
      &lt;/li&gt;
      &lt;li id="tab-3" class="tabs-heading"&gt;
        Tab 3
      &lt;/li&gt;
      &lt;li id="tab-4" class="tabs-heading"&gt;
        Tab 4
      &lt;/li&gt;
      &lt;li id="tab-5" class="tabs-heading"&gt;
        Tab 5
      &lt;/li&gt;
      &lt;li  id="tab-6" class="tabs-heading"&gt;
        Tab 6
      &lt;/li&gt;
      &lt;li  id="tab-7" class="tabs-heading"&gt;
        Tab 7
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>document.querySelector('.tabs-heading').addEventListener('click', function() {
      alert(this.id);
  });
  </code></pre>