.closest().find().text() finding multiple elements inner text

I am attempting to find the closest <h4> to a clicked button. The HTML isn't ideal but it is what I have to work with.

var name = $(this).closest('.text-long').find('.intro-text h4').text();

This should find the nearest <h4> inner text and store it in the var name. However on certain button clicks it's storing a mishmash of text. For example, this is my HTML:

<div class="text-long">
  <div class="intro-text">
    <h4>29 Melton Road</h4>
    <div>
      <p>
        <button>click me to save</button>
      </p>
    </div>
    <div class="button-slot"><a href="#" class="button">View property</a></div>
  </div>
  <div class="text-long">
    <div class="intro-text">
      <h4>32 York Road</h4>
      <div>
        <p>
          <button>click me to save</button>
        </p>
      </div>
      <div class="button-slot"><a href="#" class="button">View property</a></div>
    </div>

When I click the first button it will return name as 29 Melton Road32 York Road, an obvious mish-mash of the two <h4>'s which is incorrect.

You can see this in the JSFiddle by checking the console log.

https://jsfiddle.net/bzd617jf/2/

What am I doing wrong?