How to get value of specific 'li' with specific class - select

Question

I'm using a jquery menu UI. When the select function is triggered, a class is added to the selected item that highlights it with a color while unhighlighting a previous selection. Within that code I have a button that I want to alert the text value of the selection once the button is clicked. The problem isn't that I can't alert the value, it's that if I select something that is 3rd or 4th on the list, alert boxes will show for the previous third or second line items as well as the one that has been clicked. What code can I use to restrict the alert value down to only the selection that is highlighted with the class that adds color.
<script>
$(function(){
$(".menu").menu({
select: function (event, ui) {
$('.selected', this).removeClass('selected');
// add the css class as well as get the text value of the selection
var selection = ui.item.addClass('selected').text();
$("button").click(function(){
alert(selection);
}); //closes click()
}// closes select function
});// closes menu
});
</script>
<ul class="menu" id="menu">
<li><img src="" alt="" /><h2>Academic: Art Studies</h2></li>
<li><img src="" alt="" /><h2>Academic: Literature</h2></li>
<li><img src="" alt="" /><h2>Academic: Social Sciences</h2></li>
<li><img src="" alt="" /><h2>Academic: Physical/Natural Sciences</h2></li>
</ul>

Answer 1

You are binding click event to the button multiple times on every select. Remove the button click binding and put it outside the menu function. See fiddle
$(function () {
var selection ;
$(".menu").menu({
select: function (event, ui) {
$('.selected', this).removeClass('selected');
// add the css class as well as get the text value of the selection
selection = ui.item.addClass('selected').text();
} // closes select function
}); // closes menu
$("button").on('click', function () {
alert(selection);
}); //closes click()
});