jQuery Mobile dynamically creating select menu

Question

I need to be able to add rows to a table dynamically with jQuery mobile. The rows consist of selection menus and input boxes. The code I have seems to work in pure jQuery and html but when I add the mobile stuff it stops working (the "added" select menus and input elements act as if the first row in the table is being clicked). I have a jsfiddle here. Does anyone have suggestions? Or an explanation of why jQuery mobile is breaking my code?

Answer 1

When you call clone on the tr, the cloned row is inserted verbatim into your DOM. In order to achieve the result you want, the new <select> needs to have a unique ID.

You should add some logic to ensure that the new <select> tag has a different ID, such as select-choice-3, select-choice-4, etc.