How to get closest value of span on click by class

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:

Here is the HTML:

<div class="plan recommended">
    <div class="recommended-badge"><span>DOUBLE DATA</span></div>

    <div data-equalizer-listener="plan-heading" class="plan-header">
        <div class="prices">
            <div class="col total">
                <div class="price"><sup>$</sup> <span class="amount">85</span> <span class="caption">per month</span></div>
            </div>

            <p class="min-payment">Min. Total Cost is $2,040 over 24 months.</p>
        </div>
    </div>

    <div class="features">
        <div class="feature included_data PO_Included_Data standard first" data-equalizer-selector="PO_Included_Data" style="height: 247px;">
            <div class="description"><span class="highlight-text">28GB TOTAL DATA</span><br>
                <span class="legal">Includes 14GB + 14GB bonus data for 24 mths<br>
New and recontracting services only<br>
Offer ends 15/04/18<br>
$10 per extra 1GB</span></div>

            <div class="more-data-info hide" data-information="included-data"><strong>Data Pool -</strong> 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.</div>

            <div><a href="#" class="more-data-link" data-information="included-data" tabindex="0">more</a></div>
        </div>

    </div>
</div>

and my javascript

So when someone clicks on the a href with the class="more-data-link" I want to find the span with the class="amount" and get its text

$(".more-data-link").on("click", function(event) {
  event.preventDefault();
  var x = $(this).closest('plan-header').find('.price').find('.amount').text();
  console.log(x);
});

Solution

Please use this fiddle

$(".more-data-link").on("click", function(event) {
  event.preventDefault();
  var x = $(this).closest('.plan.recommended').find('.plan-header .price .amount').text();
  console.log(x);
});

<div class="plan recommended">
    <div class="recommended-badge"><span>DOUBLE DATA</span></div>
    <div data-equalizer-listener="plan-heading" class="plan-header">
        <div class="prices">
            <div class="col total">
                <div class="price"><sup>$</sup> 
                    <span class="amount">85</span>    
                    <span class="caption">per month</span></div>
                </div>
              	<p class="min-payment">Min. Total Cost is $2,040 over 24 months.</p>
            </div>
    	</div>
    <div class="features">
        <div class="feature included_data PO_Included_Data standard first" data-equalizer-selector="PO_Included_Data" style="height: 247px;">
            <div class="description"><span class="highlight-text">28GB TOTAL DATA</span><br>
                <span class="legal">Includes 14GB + 14GB bonus data for 24 mths<br>New and recontracting services only<br>Offer ends 15/04/18<br>$10 per extra 1GB</span>
            </div>
            <div class="more-data-info hide" data-information="included-data">
            	<strong>Data Pool -</strong> 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.
            </div>
            <div>
            	<a href="#" class="more-data-link" data-information="included-data" tabindex="0">more</a>
            </div>
        </div>
    </div>
</div>

You need to select parent (plan recommended) class and then find its child...