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?
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.