I'm using the .clone() function of jQuery Mobile to clone a div in a form so I can have repeatable sections, but now I have a problem with nested selects. 
Once the div is cloned and the nested selects are updated with the new id, something strange happens after the next 'refresh'.

What happens is very strange, the select just double and place itself inside the existing select, so the result is this:

The browser is Safari, I've not made any test with other browser because I only need this code working on Safari.

What I do to clone the div is:

1. var div = $.mobile.activePage.find('.repeatable').last().clone();

to clone, then I update the IDs:

1. var newValue = pid +'-' + index;
2. $(this).attr('id', newValue);
3. $("label[for='"+ old +"']").attr('for', newValue);

and, at the end, I refresh all selects to have the right value selected once .val() is called:

1. if ($(this).data('role') === 'select') {
2.     $(this).selectmenu();
3.     $(this).selectmenu('refresh');
4. }

The problem happens when the last part of the code is called. Before the select shows correctly, but doesn't work properly, once the select is refreshed, it starts working in the right way, but the UI is messed because has been doubled and placed as child of the original element.

What can be the origin of this problem?