I am using javascript to create and animate an html form. Due to action on it, some fields are displayed or not. Some content are dynamically created. I am trying to initialize a select2 after his dynamic creation. I have developped different function.

First of all, the initializeSelect2(element) has you can see below :

This function helps me to initialize different select with same specs.

When I reached my page, an .each() function loop on my select2 to apply the initialization.

So we can get on my web page this view :

So, when you choose an element, some fields are append dynamically to the form. For this, there is a function that created html content, and an other that display these fields on the DOM. When some new content is append, I do the initializeSelect2() function. And surprise, the view of my select on the web page is not the same. As you can see below :

First, i was thinking it was a question of time. Between the moment when the content is created and the moment when the init is doing. But it not seems to be that.

I tried to move the function somewhere else but i always get the same problem. Either the init does not work or the init looks different.

Please if you know a solution or maybe an idea which can help me. Thank you