title: How to get closest value of span on click by class
body: <p>When a user clicks on a link. I am trying to find the closest span value by class and then get that classes text. Currently it is just returning empty text:</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="plan recommended"&gt;
      &lt;div class="recommended-badge"&gt;&lt;span&gt;DOUBLE DATA&lt;/span&gt;&lt;/div&gt;
  
      &lt;div data-equalizer-listener="plan-heading" class="plan-header"&gt;
          &lt;div class="prices"&gt;
              &lt;div class="col total"&gt;
                  &lt;div class="price"&gt;&lt;sup&gt;$&lt;/sup&gt; &lt;span class="amount"&gt;85&lt;/span&gt; &lt;span class="caption"&gt;per month&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;p class="min-payment"&gt;Min. Total Cost is $2,040 over 24 months.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="features"&gt;
          &lt;div class="feature included_data PO_Included_Data standard first" data-equalizer-selector="PO_Included_Data" style="height: 247px;"&gt;
              &lt;div class="description"&gt;&lt;span class="highlight-text"&gt;28GB TOTAL DATA&lt;/span&gt;&lt;br&gt;
                  &lt;span class="legal"&gt;Includes 14GB + 14GB bonus data for 24 mths&lt;br&gt;
  New and recontracting services only&lt;br&gt;
  Offer ends 15/04/18&lt;br&gt;
  $10 per extra 1GB&lt;/span&gt;&lt;/div&gt;
  
              &lt;div class="more-data-info hide" data-information="included-data"&gt;&lt;strong&gt;Data Pool -&lt;/strong&gt; Combine any of our latest My Plan Plus (including SIM Only) and My Mobile Broadband Plus plans on the one bill to pool and share the data.&lt;/div&gt;
  
              &lt;div&gt;&lt;a href="#" class="more-data-link" data-information="included-data" tabindex="0"&gt;more&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my javascript</p>
  
  <p>So when someone clicks on the <code>a href</code> with the <code>class="more-data-link"</code> I want to find the span with the <code>class="amount"</code> and get its text</p>
  
  <pre><code>$(".more-data-link").on("click", function(event) {
    event.preventDefault();
    var x = $(this).closest('plan-header').find('.price').find('.amount').text();
    console.log(x);
  });
  </code></pre>