title: How to get the value of another element within the same div upon click?
body: <p>I've 3 div boxes &amp; buttons with the same class names.</p>
  <pre><code>&lt;div class=&quot;box&quot;&gt;
      &lt;h1 class=&quot;product_name&quot;&gt;Product 1&lt;/h1&gt;
      &lt;button class=&quot;btn_buy&quot;&gt;Buy Now&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;box&quot;&gt;
      &lt;h1 class=&quot;product_name&quot;&gt;Product 2&lt;/h1&gt;
      &lt;button class=&quot;btn_buy&quot;&gt;Buy Now&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;box&quot;&gt;
      &lt;h1 class=&quot;product_name&quot;&gt;Product 3&lt;/h1&gt;
      &lt;button class=&quot;btn_buy&quot;&gt;Buy Now&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>What I want to do is</strong>, when someone clicks, eg; the 2nd button, it will display Product 2.</p>
  <p>So, this is what I tried:</p>
  <pre><code>    $(document).ready(function(){ 
          $('.btn_buy').click(function(){
              var x = $('h1').html();
              alert(x);
          });
      });
  </code></pre>
  <p>So, this gives me the output: Product 1 , and I can understand the reason why, its because its just taking the first value of h1.</p>
  <p>What I am stuck with is, how do I implement the <code>this</code> to this? Like how do I write the code so that only this element's parent's h1 will be selected?</p>
  <p>So, I tried this as well:</p>
  <pre><code>    $(document).ready(function(){ 
          $('.btn_buy').click(function(){
              var parentTag = $(this).parent().html();
              alert(parentTag);
          });
      });
  </code></pre>
  <p>But, this displays all the content in it. So, how do I display just the H1 in it?</p>