Applying Javascript to WP dynamically numbering, menu-item-51, 52, 53

I’m theming the wp nav_menu to have the look and feel of a ticket roll, so when a user hovers over a menu item(ticket) the ticket slides up and presents it’s drop down. To accomplish this I’m using jquery to create the drop down and popup effect.

The drop down works fine. My problem is with the pop up animation. Right now it pops up once the user hovers over the ticket menu item and doesn’t go down until the user mouses off it or it’s drop down(good). However, the first menu item will go up if the second menu item is moused over. I want each menu item to go up when it and only it is moused over but because of WP’es menu system, each <li> tag in the ordered list is given the Id of “menu-item-51″ with 51 increasing for each menu item, 51, 52, 53. Hovering over <li id=”menu-item-52”> will result in having 51 go up instead of 52.

So in short, I need to apply a jquery function to each specific menu item without creating a special function for each one. Could I use a variable which increments each time the menu html is outputted in nav-menu-template.php ?

Any help any of you could provide would be greatly appreciated.

html”

<div id="menu"><div class="menu-mainmenu-container"><ul id="menu-mainmenu" class="menu"><li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home current-menu-ancestor current-menu-parent menu-item-50"><div id="ticketContain"><div id="ticket" ><div id="ticketLeft"></div><a href="https://localhost/lakerswp">Home</a><div id="ticketRight"></div></div></div>
<ul class="sub-menu">
	<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-51"><div id="ticketContain"><div id="ticket" ><div id="ticketLeft"></div><a href="https://localhost/lakerswp">Events</a><div id="ticketRight"></div></div></div></li>
</ul>
</li>
<li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-52"><div id="ticketContain"><div id="ticket" ><div id="ticketLeft"></div><a href="https://localhost/lakerswp">testTesttest</a><div id="ticketRight"></div></div></div></li>
</ul></div></div><!-- menu -->

jquery:

$(function() {
			$('#ticketContain, .menu-item').hover(function(){
				$('#ticketContain').animate({top:'-20px'},{queue:false,duration:500});
			}, function(){
				$('#ticketContain, .menu-item').animate({top:'0px'},{queue:false,duration:500});
			});
		});
});

I realize I have many divs in there, there is a reason for it I assure you.
nav-menu-template.php:

$item_output = $args->before;
		$item_output .= '<div id="ticketLink"><div id="ticketContain"><div id="ticket"><div id="ticketLeft"></div><a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '</a><div id="ticketRight"></div></div></div></div><!-- ticketLink-->';
		$item_output .= $args->after;