Structure of the pages:
- Header.php
- Contents.php
- AjaxContent.php
There is a select2 in the header.php having ID=W0.
From the contents.php page, I called AjaxContent.php using AJAX, prepared a form element with three more select2 dropdowns, and appended that form to the contents.php page.
Now on the browser document, there are four select2 dropdowns having the ids
- ID = W0 - Header.php
- ID = W0 - Contents.php
- ID = W1 - Contents.php
- ID = W2 - Contents.php
So as you can see, a duplicate ID is causing the issue and does not render the select2 properly.
Is there any way to add a prefix to ID so that we can tell select2 to use that to create a unique ID?