I have a problem with how to use JQuery-UI in the way that I want

I have a problem with how to use JQuery-UI in the way that I want

I must say that I'm quite new to JQuery.
None of the suggestion that I have got so far has been working.
I don't really know if it's possible to use JQuery-UI and passing data in the way that I now want.
I might have to change something in order to have it work.

I open my JQuery-Ui dialog dlgBooking in this way.
 $("#dlgBooking").data("id", this.id).dialog({
                   width: 230
               });

as you can see I pass in this.id.
Lets call the passed data this.id for X just to simplify my explanation of my problem.

The actual JQuery-Ui dialog looks like this. As you can see each link is calling a function by using href
 <div id="dlgBooking" title="Booking menu" style="display:none">
       <ul class="nav">
         <li><a href="javascript:Booking()">Booking</a></li>
         <li><a href="javascript:ChangeTime()">Change time</a></li>
         <li><a href="javascript:CancelBooking()">Cancel booking</a></li>
         <li><a href="javascript:Createlocking()">Create locking</a></li>
         <li><a href="javascript:Removelocking()">Remove locking</a></li>
       </ul>
    </div>

Now to the big problem. The only interaction I have with the JQuery-UI is to select a link in the dlgBooking
unordered list

But in some way when a link is clicked in the JQuery-UI dialog for example Booking. So when booking is called I must be able to find the passed data which I called X in this example.

As it is now I pass in data this.id into the JQuery-UI dialog but how do I pass it further into my functions
Booking(), Change time(), Cancel booking(), Create locking(), Remove locking().

//Tony