在<div>相同的结构中复制每个值

我有两个嵌套的具有相同结构的<div>。像这样:

<div class="foo" id="{{ randomNumber1 }}">Hello</div>
<div class="this" id="{{ randomNumber2 }}">
<div class="that" id="{{ randomNumber3 }}">World</div>
<div class="bar" id="{{ randomNumber4 }}">
<div class="fizz" id="{{ randomNumber5 }}">
<div class="buzz" id="{{ randomNumber6 }}">How was your day?</div>
</div>
</div>
<!-- goes on -->

在其他地方，我有相同的结构。然而，div的ID是不同的，他们有一个不同的javascript初始化。我需要复制结构的值，并将其放入第二个相同的结构中。

我已经尝试使用jQuery的html:

$(mySecondStructure).html($(myFirstStructure).html());

然而，这显然破坏了id，因此破坏了javascript。因此，唯一的解决方案是只复制每个结构的值，并将其放入第二个结构的等效<div>中。

是否有一种方法可以轻松地克隆它?我知道我可以用each();函数但也许

中已经内置了一些东西

$('yourselector')
.clone(true)
.attr('id', 'new_unique_id')
.off();