Select2 does not work on cloned form


Select2 works on my original html form. After duplicating the table row, the cloned row does not display the iframe search or dropdown menu.


When you initialize a Select2 widget on an HTML <select> element, Select2 creates several additional DOM elements around the <select>, as well as some other DOM elements (for the search box and dropdown) that usually are appended to the end of the <body>. Therefore, you can’t simply duplicate the HTML of the row and expect the new row to have an initialized Select2 widget.(It will have copies of the extra DOM elements, but Select2 won’t know what to do with them). After copying the row, you will need to initialize the <select> element in the new row to convert it to a working Select2 widget.

I don’t know whether initializing the new row’s <select> element will update/replace those additional DOM elements, or whether it will create a new set of the additional DOM elements while leaving the copied old set in place (which I imagine would cause problems). You’ll have to try it and see what happens. If it does indeed leave the copied old set of Select2 DOM elements in place, you’ll probably need to manually find and remove those elements in the new row before initializing its <select>.