I currently have this DIV:
<div id="video_container" class="barra">
<ul>
<li><iframe width="450" height="253" src="//www.youtube.com/embed/Gy3lrgVakII" frameborder="0" allowfullscreen></iframe></li>
<li><iframe width="450" height="253" src="//www.youtube.com/embed/AnwKqlhzCM4" frameborder="0" allowfullscreen></iframe></li>
<!-- more iframe elements here -->
<li><iframe width="450" height="253" src="//www.youtube.com/embed/NKzwcbidanM" frameborder="0" allowfullscreen></iframe></li>
</ul>
</div>
<div id="video_container_mobile"></div>
I am looking to duplicate the content of the first div into another div with the same structure (<ul>...</ul> )
To achieve this, I have the following script:
var list = $("#video_container_mobile").append('<ul></ul>').find('ul');
$("#video_container ul li").each(function() {
var el = $(this);
list.append(el);
});
While this script successfully copies the content, it also removes it from the original div.
Please refer to the image below for a visual representation:
You can test the functionality in this JSFiddle:
If anyone has a solution on how to keep the same content in both DIVs, your assistance would be highly appreciated.