var App = function() {
this.page = window.location.pathname.split("/public/portal/")[1].split("/")[0];
}

$.extend(App.prototype, {

// This will set the variables in the box and display / hide
setVariables: function(ele, vars){
    this.variables = vars || variables;
    var list = $("#page_variables .text_variables");

    // Create the variable box
    $('li', list).remove();    // first remove all variables currently in the box
    console.log(ele);

    ele.bind('focus', function(){
            list.fadeIn();
        })
        .bind('blur', function(){
            list.fadeOut();
        });
}
});

(function($, undefined){
  $(".tvar_text").focus(function(){
    port.setVariables($(this), null);
  });
})(jQuery);

<div id="page_variables">
            <div class="text_variables" style="display:none">
                <ul>
                    <strong style="text-decoration: underline;">VARIABLES</strong>
                    <li>{provider}</li>
                    <li>{date}</li>
                    <li>{callerid}</li>
                    <li>{time}</li>
                    <li>{location}</li>
                    <li>{recipient}</li>
                    <li>{misc1}</li>
                    <li>{misc2}</li>
                    <li>{misc3}</li>
                    <li>{misc4}</li>
                </ul>
            </div>
        </div>

        <textarea class="tvar_text" name="Vtmpl" cols="50" rows="10" style="min-height: 200px; overflow: hidden; resize: none; height: 50px;"></textarea>