javascript - Clone element from div to list -

i need build simple tabs menu. problem must generate somethink ...

 <ul id="menu">   <li class="first">first</li>   <li class="second">second</li>   <li class="third">third</li> </ul> 

...from somethink that

<div class="someclass">      <li class="first">first</li>     <p>text</p>     </div> <div class="someclass">      <li class="second">second</li>     <p>text</p>     </div> <div class="someclass">      <li class="third">third</li>     <p>text</p>     </div> 

i tried solve broblem pure knowledge in js...

<div id="putafter">   <ul id="menu">   <li id="m">first</li>   <li id="m">second</li>   <li id="m">third</li> </ul>    <div style="display:none">  <div class="someclass">      <li id="m">4</li>     <p>text</p>     </div> <div class="someclass">      <li id="m">5</li>     <p>text</p>     </div>     <div class="someclass">      <li id="m">6</li>     <p>text</p>     </div>     </div> 

and simple script

$(document).ready(function(){      $('#4').clone().insertafter($('#m3'));      $('#5').clone().insertafter($('#4'));      $('#6').clone().insertafter($('#5')); }); 

as can see there big problem - duplicates in ids :( cant generate ids <li> elements script because menu load in header.phtml file , <div> content in footer.phtml dont know how ids need (thats why cant menu items using php - forget standart "get db" zend...). maybe need generate or "array"?

i grateful help!

you can select li inside .someclass elements, clone them , add newly created ul, adding body.

fiddle.

$(document).ready(function() {     var ul = $('<ul>', { id: "menu" });     ul.append($('.someclass li').clone());     $("body").append(ul); });