javascript - Duplicate a leaflet div (a div that contains also a heatmap) -

i having trouble duplicating div container of leaflet. used clone of jquery duplicate div on second one. works tailes, map has heatmap layer on it. , layer clone ignores completly!

let me try put simple example, consider have 2 divs, 1 map , other empty!

<button id="duplicatebtn">duplicate map</button>          <div id="map" style="width: 100%; height: 200px"></div>     <p>next</p>     <div id="newtestmap" style="width: 100%; height: 200px"></div>

<script>           // treats duplicate button click        	$("#duplicatebtn").click(function(){              $('#map').clone().appendto('#newtestmap');  	});  </script>

you can find code @ codepen:
http://codepen.io/danielcamara/pen/majaqy

however, real problem want print map content specific page format. map, user can handle e.g. change heat map, add other layers etc... however, when user decides print it, need print present status of map. idea copy div on window (the map layers, heatmap , one), formatting purposes, before printing simple window.print().

i found other printing solutions, e.g. jquery.print.js, these not handle heatmap either.

does 1 has solution either clone map div or print correctly? suggestions welcome :)

daniel