Form with three select2 fields problem

Hello,

I have form with three fields:
Country select2 with 4 options;
State text field for 3 countries and select2 for 1 country;
City text field for 3 countries and select2 for 1 state;

If open browser and i select all three select2 fields they works.

But if i change country that trigger state or city text fields then i go back with country that should trigger state and city select2 fields they remain text field…and select2 dont work anymore…

when seletc2 state field works
< select name=“billing_state” id=“billing_state” class=“state_select thwcfe-input-field select2-hidden-accessible” autocomplete=“address-level1” data-placeholder=“Seleziona la tua provincia” data-input-classes=“thwcfe-input-field” tabindex="-1" aria-hidden=“true”>Seleziona un’opzione…</option
when seletc2 city field works
< select name=“billing_city” id=“billing_city” class=“select thwcfe-input-field thwcfe-enhanced-select select2-hidden-accessible enhanced” autocomplete=“address-level2” data-allow_clear=“true” data-placeholder=“Seleziona prima la provincia e poi la città” tabindex="-1" aria-hidden=“true”>

when i change country and go back to working one:
state field is:
< select id=“billing_state” name=“billing_state” data-input-classes=“thwcfe-input-field” class=“state_select thwcfe-input-field select2-hidden-accessible” tabindex="-1" aria-hidden=“true”>Seleziona un’opzione…</option
and city field is:
< input type=“text” id=“billing_city” name=“billing_city” class=“input-text select2-hidden-accessible” tabindex="-1" aria-hidden=“true” disabled="">
if i select one state from dropdown:
city field becomes so:
< select id=“billing_city” name=“billing_city” class=“city_select select2-hidden-accessible” tabindex="-1" aria-hidden=“true”>Seleziona un’opzione…</option

how can solve it?

Thank you

Can you put your code on codepen.io or jsfiddle.net so I can see exactly what it’s doing?