title: Jquery how to use $(this) to get value of clicked item?
body: <p>I have trouble getting value of particular item that I'd clicked</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(document).ready(function(){
          $(this).click(function(){
              alert($(this).find("button").html());
          });
      });
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;p&gt;test 1&lt;/p&gt;
      &lt;p&gt;test 2&lt;/p&gt;
      &lt;button&gt;Yes&lt;/button&gt;
      &lt;button&gt;No&lt;/button&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <ul>
  <li>I'd tried <code>$(this).find("button").html()</code>, but it will return the value of 1st button("Yes) even if I clicked the 2nd button("No")</li>
  <li>Same for <code>$(this).find("p").html()</code>, will return value of 1st <p></li>
  <li>How do I use <code>$(this)</code> to get the value of item I clicked?</li>
  <li>Don't suggest me to insert class or id, I'm not suppose to touch the html. </li>
  <li>Please assist, thanks.</li>
  </ul>