jquery ui position( ) keeps moving the menu down further each click

I am developing a flyout menu that pretty much has to be from scratch due to the application it's going into. Besides it's good jquery practice. The code is found here:

http://jsfiddle.net/sfullman/vh0xq6s1/4/

just click on any of the light gray squares and the menu will appear. BUT, clicking it once will make it show and again will make it hide, and then a third, fourth etc. time it continues to move down (try the first row, third square across for example).

Can anyone explain how to fix this?

Here is the html:

<div id="templateMenuRoot" style="display:none;">
    <div class="container">
        content here content here content here content here<br>
        my data: <span id="data"></span>
    </div>
</div>
<!-- here is a row of buttons that are all menuable -->
<div class="menuWrap cf">
<div class="button" id="button-1">
</div>
<div class="button" id="button-2">
</div>
<div class="button" id="button-3">
</div>
</div>
<!-- another row.. -->
<div class="menuWrap cf">
<div class="button" id="button-4">
</div>
<div class="button" id="button-5">
</div>
<div class="button" id="button-6">
</div>
</div>

and the js here:

$(document).ready(function(){
    $('.button').click(function(e){
        var id=$(this).attr('id');
        if(!$('#templateMenuRoot').data('encounter'))$('#templateMenuRoot').data('encounter','');
        if($('#templateMenuRoot').is(':hidden') ||     $('#templateMenuRoot').data('encounter')!=id){
            $('#templateMenuRoot').data('encounter',id);
        $('#data').html(id);
            $('#templateMenuRoot').position({
                at: "right bottom+2",
                my: "right top",
                collision: 'fit',
                of: $(this)
            });
            $('#templateMenuRoot').fadeIn(400);                         
        }else{
            $('#templateMenuRoot').fadeOut(400);
        }
    });
});