JQuery and the Dollar Sign problem

JQuery and the Dollar Sign problem

This is my first post here and my first time to be using JQuery UI. I'm getting problems making the datepicker UI plugin work with the infamous $() method as an alias to document.getElementById() method. I used the jQuery.noConflict() method to create an alias called $jq for my datepicker UI script, but the button that has the '$('refreshButton').click() throws the dreaded 'Object doesn't support this property or method'. I am working with legacy javascripts way back when and would like to introduce JQuery UI, and wondering how I could make the button 'notWorking' works. Thanks.

Here's my HTML code:

<html>
<head>
    <link type="text/css" href="/components/JQueryUI/jquery-ui-1.8.1.custom.css" rel="stylesheet"/>
    <script type="text/javascript" src="/components/JQueryUI/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="/components/JQueryUI/jquery-ui-1.8.1.custom.min.js"></script>

    <script language="JavaScript">
        function $(x) { return document.getElementById(x); }
    </script>
</head>
<body>

<input type="text" name="IRProductView.asAtDate" size="20" class="cell" id="datepicker--asAtDate">
<script type="text/javascript">
    var $jq = jQuery.noConflict();
    $jq(function() { $jq('#datepicker--asAtDate').datepicker(); });
</script>

<input type="submit" name="AddAppointment.refreshButton" value="Refresh" onClick="alert('Hello World!')"
       class="stButton" id="refreshButton">
<button class="cell" onclick="$('refreshButton').click()" title="Refresh this page"><img src="" alt="notWorking"/></button>
</body>
</html>