Update appended variable on click PHP / Jquery

I have an array like

     <?php 
        $info = array(
            "cat",
            "dog",
            "bear"
            );
    ?>

And I output one String randomly on an overlay like

<script>
var text = '<?php echo $info[array_rand ($info)];?>';

$(function() {

var loading = function() {

    var over = '<div id="overlay">' + '<p class="info">' + text + '</p>' + '</div>';         
    $(over).appendTo('body');

    $('#overlay').click(function() {
        $(this).remove();
    });


    $(document).keyup(function(e) {
        if (e.which === 27) {
            $('#overlay').remove();
        }
    });
};

$('.wrapper').click(loading);

});
</script>

CSS:

#overlay {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #000;
opacity: 0.90;
height: 200%;
}

.info{
position: absolute;
width: 100%;
top: 25%;
height: 200px;
font-size: 50px;
color: white;
text-align: center;
}

My question is: How can I update the var text and get a new random string every time the overlay is opened by clicking on the body? Till now the string in var text is only updated when I reload the whole page.

Thanx :)