title: Jquery click multiple IDs and get value
body: <p>I'm trying to get the value of an element when a user click on it. This is my code:</p>
  
  <pre><code>&lt;div id="heroes-selection" class="row dflex justify-content-left"&gt;
      &lt;figure id="luna" class="heroes-pic border text-danger m-3" value="heroes.luna"&gt;
        &lt;img class="animated-gif"&gt;
     &lt;/figure&gt;
  
     &lt;figure id="qop" class="heroes-pic border text-danger m-3" value="heroes.qop"&gt;
        &lt;img class="animated-gif"&gt;
     &lt;/figure&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried  to use Jquery <code>$(this)</code> and the result came out as <code>undefined</code>.</p>
  
  <pre><code>$(".heroes-pic").on("click", () =&gt; {
    player = $(this).attr("value");
    console.log(player);
  });
  </code></pre>
  
  <p>My goal is to get the value <code>heroes.luna</code> when the user click on the figure with <code>id="luna"</code>. The same for <code>id="qop"</code>, I need to get the value <code>heroes.qop</code>. Thank you!</p>