How to get dynamic ID of a button in jQuery

I have written below code of HTML. Here id="1" , id="2", id="3", id="4" ............ id="100" dynamically created.

<span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">

</span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="tag">&gt;</span><span class="pln"> 
</span><span class="tag">&lt;li&gt;&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"highlight"</span><span class="tag">&gt;</span><span class="pln"> Edit </span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"highlight"</span><span class="tag">&gt;</span><span class="pln"> Edit </span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"3"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"highlight"</span><span class="tag">&gt;</span><span class="pln"> Edit </span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;li&gt;&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"4"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"highlight"</span><span class="tag">&gt;</span><span class="pln"> Edit </span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;/li&gt;</span><span class="pln">
...............................

</span><span class="tag">&lt;li&gt;&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"100"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"highlight"</span><span class="tag">&gt;</span><span class="pln"> Edit </span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span>

Way 1: you can use this jQuery code.

In this case we are targeting the class highlight and then taking the id using attr() function.

I have written below code of HTML.

<span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln"> 

$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">  
$</span><span class="pun">(</span><span class="str">'.highlight'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">){</span><span class="pln">
     </span><span class="kwd">var</span><span class="pln"> id </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'id'</span><span class="pun">);</span><span class="pln">
     alert</span><span class="pun">(</span><span class="pln">id</span><span class="pun">);</span><span class="pln"> 
</span><span class="pun">});</span><span class="pln">
</span><span class="pun">});</span><span class="pln">

</span><span class="tag">&lt;/script&gt;</span><span class="pln">
</span>

Way 2: Below Code also works Fine

In this process I am directly targeting the class and taking its id.

I have written below code of HTML.

<span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln"> 

$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">  
 
$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">"click"</span><span class="pun">,</span><span class="pln"> </span><span class="str">".highlight"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">var</span><span class="pln"> id </span><span class="pun">=</span><span class="pln">  </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">id</span><span class="pun">;</span><span class="pln"> 
  alert</span><span class="pun">(</span><span class="pln">id</span><span class="pun">);</span><span class="pln"> 
</span><span class="pun">});</span><span class="pln">

</span><span class="pun">});</span><span class="pln">

</span><span class="tag">&lt;/script&gt;</span><span class="pln">
</span>