How do I capture an element during a click event

I need to capture an element in a click event so that i can then capture data out of a div. The web site page is http://atlanticbay.com/search-mortgage-bankers/.
What i am trying to do is get the -->data-mb-name, and data-mb-id from the div, when an inner element within an inner div is clicked on. Basically when someone click on the view me button for a mortgage broker on the above web page, i need to tell the script to capture that particular element and then bubble up to the parent div and grab the data-mb-name .

Here is the basic div script.</p>

<div class="col-lg-4 col-md-6 col-sm-6 mb-col-0 mbs-item" data-mb-id="20016" data-mb-name="Amiee Carr" data-mb-fname="Amiee" data-mb-lname="Carr" data-mb-city="Virginia Beach" data-mb-state="VA" data-mb-zip="23452">
<div class="mbs-item-inner">
<div class="mb-img"><img src="http://d3k0pmp8tgrvhb.cloudfront.net/wp-content/uploads/20160302085148/amiee-carr-hero.jpg" alt="Amiee Carr - Mortgage Banker" class="img-responsive mb-profile-img">
</div><h5 class="mb-name">Amiee Carr</h5>
<p class="mb-title">Mortgage Banker</p>
<p class="mb-loc">Virginia Beach, VA</p>
<p class="mb-view">
<a href="http://atlanticbay.com/amieecarr/" class="btn-ghost-blue"
target="_blank">VIEW ME</a>
</p>
<p class="mb-apply">
<a href="https://www.secureloandocs.com/app/36309094/loId/21961" class="btn-ghost-blue" target="_blank">APPLY NOW!</a></p>​

</div></div>

The inner element is highlighted in blue, that is the element that needs to get captured, and then use (parents) or (closest) to go grab the data highlighted in red from the parent div.

This is what i tried but to no avail.

$(document).ready(function(){
$("btn-ghost-blue").click(function(){
.closest (div).attr("data-mb-name");
var mbname = this.attr();
});
});​

Would appreciate your advice.

Thanks

 

Just do a parents('.mbs-item') and get the attributes from that object?