Creo algunos elementos con almacenamiento local y funciona bien, pero quiero que los elementos también se clonen en una etiqueta div específica.

aquí está mi jsFiddle Code jsFiddle Demo

Ahora, cuando intento clonar todos los elementos en <div class="all-items"></div> pero no funcionó, aquí está mi código a continuación

 $(function() { $('.mix').click(function() { $(this).toggleClass('selected') window.localStorage.setItem('test' + this.dataset.id, $(this).hasClass('selected')); }); $('.mix').each(function() { var id = 'test' + this.dataset.id; if (localStorage.getItem(id) && localStorage.getItem(id) == "true") { $(this).addClass('selected'); } }); $(document).ready(function() { var e = $('.top-items'); for (var i = 0; i < 5; i++) { e.clone().insertAfter(e); } });

y el HTML está aquí

 <div class="top-items"> <div data-id="1" class="box p001 mix ">Div 1</div> <div data-id="2" class="box p002 mix">Div 2</div> <div data-id="3" class="box p002 mix">Div 2</div> <div data-id="4" class="box p002 mix">Div 2</div> <div data-id="5" class="box p002 mix">Div 2</div> </div> <div class="all-items"></div> //all elements should be clone here on click one by one

Para lograr esto, probé la función de clic, pero no dio la solución perfecta, por lo que quiero que cuando se agreguen elementos, se eliminen al hacer clic en esta etiqueta clonada <div class="all-items"></div> .

cualquier ayuda o consejo es muy apreciado.