title: Jquery get id of an element on click of a common class
body: <p>I am programmatically populating options to increase and decrease the value of an element and store the same in the DB table. To get a better idea, consider the following example:</p>
  
  <pre><code>&lt;tr&gt;
    &lt;td id="name_1"&gt;Element 1&lt;/td&gt;
    &lt;td&gt;&lt;a href="#" class="increase" id="inc_1"&gt;increase icon&lt;/a&gt;&lt;/td&gt;
    &lt;td&gt;&lt;a href="#" class="decrease" id="dec_1"&gt;decrease icon&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
    &lt;td id="name_2"&gt;Element 2&lt;/td&gt;
    &lt;td&gt;&lt;a href="#" class="increase" id="inc_2"&gt;increase icon&lt;/a&gt;&lt;/td&gt;
    &lt;td&gt;&lt;a href="#" class="decrease" id="dec_2"&gt;decrease icon&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
    &lt;td id="name_n"&gt;Element n&lt;/td&gt;
    &lt;td&gt;&lt;a href="#" class="increase" id="inc_n"&gt;increase icon&lt;/a&gt;&lt;/td&gt;
    &lt;td&gt;&lt;a href="#" class="decrease" id="dec_n"&gt;decrease icon&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Whenever I click any among the <code>n</code> increase / decrease icon, I need to access the value of <code>#name_n</code>. For which, I wrote the following function:</p>
  
  <pre><code>$(".increase").click(function(){
    var id = $(this).attr('id'); //get the id of the element that was clicked.
    console.log(id);
  
    var arr = id.split("_"); //split to get the number
    var no = arr[1]; //get the number
  
    var name = $("#name_"+no).text(); //get the required value in name_n
    console.log(name); 
   });
  //replica for decrease class as well.
  </code></pre>
  
  <p><strong>Problem :</strong>
  Every time I click <strong>any</strong> increase icon, in my <code>console</code>, I'm getting <code>id</code> as <code>inc_1</code> only! So, the value of <code>name</code> is <code>Element 1</code> always. Same happens with <code>click</code> function for <code>.decrease</code>.</p>
  
  <p>I have tried with the following ways to get the <code>id</code>:</p>
  
  <pre><code>var id = this.id;
  var id = $(this).get(0).id;
  var id = $(this)[0].id;
  </code></pre>
  
  <p>But nothing changed. The same problem persists. What's wrong and how do I resolve this?</p>