title: How do I select the button that is clicked, from a multitude of similar buttons, from the following code?
body: <p>I am trying to implement a vote up/down functionality on comments.</p>
  
  <p>For that, I've placed two buttons in every comment. Using jQuery's each() and click() functions, I am trying to get the button's id that was clicked, fire an ajax request to aother page, and then disable both vote up/down buttons for that specific comment using the success() callback.</p>
  
  <p>For initial verification of whether it works or not, I'm trying this on just two comments i.e. 4 buttons, and then disabling a specific pair of them, irrespective of which button is clicked.</p>
  
  <p>I've tried 3-4 different selector queries, but the only one that works is where I specifically pass the exact id attribute's value of the button that I click on. I need to implement this in a general fashion, on a page with multiple comments and their buttons!!</p>
  
  <p>Here's the PART of the HTML code on which I'm trying to use the jQuery:<br></p>
  
  <pre><code>&lt;section class="section content"&gt;
  
              &lt;div class="content-wrapper"&gt;
                  &lt;div class="zone-content equalize zone clearfix"&gt;
                      &lt;div class="content-container container-16"&gt;
                          &lt;div class="comments block"&gt;
                              &lt;div class="block-title-2"&gt;
                                  &lt;h2&gt;Comments on Place X&lt;/h&gt;
                              &lt;/div&gt;
                              &lt;div class="review-messages"&gt;
  
                                  &lt;div class="review first"&gt;
                                      &lt;div class="review-author"&gt;
                                          &lt;b&gt;
                                              &lt;span class="author"&gt;John&lt;/span&gt; - &lt;span class="date"&gt;April 10, 2013 at 7:34 pm&lt;/span&gt;
                                          &lt;/b&gt;
                                      &lt;/div&gt;
                                      &lt;br&gt;
                                      &lt;div class="review-text"&gt;
                                          Best place to have abcdef food in yyyyy. !!!
                                      &lt;/div&gt;
                                      &lt;br&gt;
                  &lt;!-- xxxxxxx SELECT ONE OF THESE TWO --&gt;   &lt;button class="btn btn-circle btn-success" id="test_id_1"&gt;&lt;i class="glyphicon glyphicon-thumbs-up"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/button&gt;
                  &lt;!-- xxxxxxx SELECT ONE OF THESE TWO --&gt;  &lt;button class="btn btn-circle btn-danger" id="test_id_2"&gt;&lt;i class="glyphicon glyphicon-thumbs-down"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/button&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="review last"&gt;
                                      &lt;b&gt;
                                          &lt;div class="review-author"&gt;
                                              &lt;span class="author"&gt;John&lt;/span&gt; - &lt;span class="date"&gt;April 10, 2013 at 7:34 pm&lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/b&gt;
                                      &lt;br&gt;
                                      &lt;div class="review-text"&gt;
                                          &lt;p id="text1"&gt;Great xxxx and a good place to yyyy :)&lt;/p&gt;
                                      &lt;/div&gt;
                                      &lt;br&gt;
                  &lt;!-- xxxxxxx SELECT ONE OF THESE TWO --&gt;    &lt;button class="btn btn-circle btn-success" id="test_id_3"&gt;&lt;i class="glyphicon glyphicon-thumbs-up"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/button&gt;
                  &lt;!-- xxxxxxx SELECT ONE OF THESE TWO --&gt;   &lt;button class="btn btn-circle btn-danger" id="test_id_4"&gt;&lt;i class="glyphicon glyphicon-thumbs-down"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="comment-message"&gt;
                                  &lt;div class="comment-message-title"&gt;
                                      Leave a &lt;span class="text-colorful"&gt;Comment&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;form class="comment-message-form"&gt;
                                      &lt;textarea class="text-input-grey comment-message-main" placeholder="Your Comments Here"&gt;&lt;/textarea&gt;
                                      &lt;div class="thin-separator"&gt;&lt;/div&gt;
                                      &lt;input type="submit" class="button-2-colorful to-right" value="Post Comment" name="comment" /&gt;
                                  &lt;/form&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;&lt;!-- end of .content-container --&gt;
  
                  &lt;/div&gt;&lt;!-- end of .zone-content --&gt;
              &lt;/div&gt;&lt;!-- end of .content-wrapper --&gt;
  
          &lt;/section&gt;
  </code></pre>
  
  <p>Here are the various jQuery selector codes I've tried:<br><br>
  1. <strong>DOESN'T WORK</strong></p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
          $(document).ready(function() {
              $('div button[id^="test_id_"]').each(function(){
                  $(this).click(function(e){
              var name = {"name":$(this).attr("id")};
              $.ajax({
                      url: 'receiveajax.php',
                      data: name,
                      type: 'POST',
                  }).success(function(data) {
  
                          $(this).attr("disabled",true);
                      });
  
                      });
        });
     });
     &lt;/script&gt;
  </code></pre>
  
  <p><br>2. <strong>DOESN'T WORK</strong></p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
          $(document).ready(function() {
              $('button').click(function(e){
                  $('button[id^="test_id_"]').each(function(){
              var name = {"name":$(this).attr("id")};
              $.ajax({
                      url: 'receiveajax.php',
                      data: name,
                      type: 'POST',
                  }).success(function(data) {
  
                          $(this).attr("disabled",true);
  
                      });
        });
     });
     &lt;/script&gt;
  </code></pre>
  
  <p><br>3. <strong>SPECIFIC ELEMENT SELECTOR QUERY. WORKS.</strong><br></p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
          $(document).ready(function() {
              $("#test_id_1").click(function(e){
              var name = {"name":$(this).attr("id")};
              $.ajax({
                      url: 'receiveajax.php',
                      data: name,
                      type: 'POST',
                  }).success(function(data) {
  
                          $("#test_id_1,#test_id_2").attr("disabled",true);
                      });
        });
     });
     &lt;/script&gt;
  </code></pre>
  
  <p><br> And this is the page that  will receive the Ajax POST request, implemented as a simple stub. I've also used it's echo output in the success() callback to print it, so as far as I'm concerned, this file doesn't have any errors. Probably. :</p>
  
  <pre><code>&lt;?php
  if( $_REQUEST["name"] )
  {
     $name = $_REQUEST['name'];
     echo "Welcome ". $name;
  }
  ?&gt; 
  </code></pre>