jqm1.3 Panel ... dismissive behavior stops working after several 'page' changes

jqm1.3 Panel ... dismissive behavior stops working after several 'page' changes

I have a panel. It works as expected.

But I want the panel to be available on every 'page'. So I set up a system of moving the panel from 'page' to 'page' as I navigate through the jqm site:
  1. jQuery(document).on(  'pagebeforeshow' ,  function( argo_e , argo_data )       
  2.   { jQuery('#my_panel'  ).remove().appendTo( jQuery( argo_e.target )    )  ;
  3.     jQuery('#my_panel'  ).panel() ;
  4.     //jQuery('#my_panel'  ).panel().trigger( "updatelayout" );
  5.   }  ;                                                                  
PROBLEM: by the 3rd page navigation, the click-off-panel-to-close functionality stops working.

you can see the problem here on my messy dev page:

how to Recreate Problem:
1 - load page first time,
1a - click small black button at top right to activate panel
1b - click somewhere on page to de-activate
2 - navigate to another page
2a - use the collapsible menu to navigate at bottom (but be aware: the first collapsible is empty)
2b - activate the panel again
2c - click somewhere on page to de-activate
3 - navigate back to HOME
3a - use the 'home' at top left
3b - activate panel
3c - click somewhere to de-activate it ... FAILs

any suggestions please.