jquery mobile .clone collapsible menu -fiddle
===

I have a page with a collapsible menu.
When the $(document).width() is below a specified menu I want to clone and append the whole menu to the header and offer a 'menu' link.

As the menu is pretty large I want to clone the already enriched html with it's click events.
Rather than building and enriching the menu a second time.


This works perfectly except for ui-collapsibles within the menu:

Please have a look:  (short code sample)
http://jsfiddle.net/N7Z9e/1478/


It doesn't matter which collapsible is clicked, the first one's expand/collapse function is called.

Investigating the .data("events") I can see they are sharing the same guid.
Does anyone know any hacks to work around this?

I am using .clone(true) - copying the registered event handlers because there are a lot of custom handlers coming from an mvc.


thanks alot!