Move html with dropdownlist from one div to another after initialization

[Lee]

I have a block of html that I want to move from one div to another div on the page using javascript. I am writing a function that will move this code block and will have no idea if, or how many, dropdown lists exist as it will be different every time. My problem is that when I do a .clone(true, true) with JQuery, the dropdownlist either stops opening or it opens with a width of 0 in the upper left corner of the screen. How do I fix this?

Task: Move everything from block1 to block2. 

<div id="block1">
<p>Hi! I'm a paragraph.</p>
<select id="select1"></select>
The select was already initialized with JS and works fine.
</div>

<div id="block2">

</div>

[Martin]

Hello, Lee,

I think that the best approach would be to destroy the DropDownList from div#block1 and append a new element in the div#block2 so that you can initialize the widget anew.

Let me know how that would work for you.

Regards,
Martin
Progress Telerik

[Lee]

That wont really work because these are actually in a table like list of divs. There can be many and I wont know how to rebuild them after the fact very easily. I cant use the Kendo grid component because it doesnt scale doen to mobile or tablet very well. When the user clicks a button it reorders all of the divs to be in the order they chose but then the dropdown lists wont open. 

[Martin]

I am afraid that there is no other approach I can offer. If you move the element from which the widget is initialized, you will need to recreate it.