Dynamic select not working with Materialize
<p>materialize css not working with dynamic select. Its working fine with countries but not showing states. </p>

<p>I think there is some problem with the jquery.</p>

<p>Please check my code snippet.</p>

<p>I have checked everything on the internet. But nothing works for me.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var country_arr = new Array("Afghanistan", "Albania", "Algeria", "American Samoa", "Angola", "Anguilla", "Antartica", "Antigua and Barbuda", "Argentina", "Armenia" );

// States
var s_a = new Array();
s_a[0]="";
s_a[1]="Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol";
s_a[2]="Berat|Bulqize|Delvine|Devoll (Bilisht)|Diber (Peshkopi)|Durres|Elbasan|Fier|Gjirokaster|Gramsh|Has (Krume)|Kavaje|Kolonje (Erseke)|Korce|Kruje|Kucove|Kukes|Kurbin|Lezhe|Librazhd|Lushnje|Malesi e Madhe (Koplik)|Mallakaster (Ballsh)|Mat (Burrel)|Mirdite (Rreshen)|Peqin|Permet|Pogradec|Puke|Sarande|Shkoder|Skrapar (Corovode)|Tepelene|Tirane (Tirana)|Tirane (Tirana)|Tropoje (Bajram Curri)|Vlore";
s_a[3]="Adrar|Ain Defla|Ain Temouchent|Alger|Annaba|Batna|Bechar|Bejaia|Biskra|Blida|Bordj Bou Arreridj|Bouira|Boumerdes|Chlef|Constantine|Djelfa|El Bayadh|El Oued|El Tarf|Ghardaia|Guelma|Illizi|Jijel|Khenchela|Laghouat|M'Sila|Mascara|Medea|Mila|Mostaganem|Naama|Oran|Ouargla|Oum el Bouaghi|Relizane|Saida|Setif|Sidi Bel Abbes|Skikda|Souk Ahras|Tamanghasset|Tebessa|Tiaret|Tindouf|Tipaza|Tissemsilt|Tizi Ouzou|Tlemcen";
s_a[4]="Eastern|Manu'a|Rose Island|Swains Island|Western";
s_a[5]="Andorra la Vella|Bengo|Benguela|Bie|Cabinda|Canillo|Cuando Cubango|Cuanza Norte|Cuanza Sul|Cunene|Encamp|Escaldes-Engordany|Huambo|Huila|La Massana|Luanda|Lunda Norte|Lunda Sul|Malanje|Moxico|Namibe|Ordino|Sant Julia de Loria|Uige|Zaire";
s_a[6]="Anguilla";
s_a[7]="Antartica";
s_a[8]="Barbuda|Redonda|Saint George|Saint John|Saint Mary|Saint Paul|Saint Peter|Saint Philip";
s_a[9]="Antartica e Islas del Atlantico Sur|Buenos Aires|Buenos Aires Capital Federal|Catamarca|Chaco|Chubut|Cordoba|Corrientes|Entre Rios|Formosa|Jujuy|La Pampa|La Rioja|Mendoza|Misiones|Neuquen|Rio Negro|Salta|San Juan|San Luis|Santa Cruz|Santa Fe|Santiago del Estero|Tierra del Fuego|Tucuman";
s_a[10]="Aragatsotn|Ararat|Armavir|Geghark'unik'|Kotayk'|Lorri|Shirak|Syunik'|Tavush|Vayots' Dzor|Yerevan";
// &lt;!-- --&gt;



function populateStates( countryElementId, stateElementId ){
 
 var selectedCountryIndex = document.getElementById( countryElementId ).selectedIndex;

 var stateElement = document.getElementById( stateElementId );
 
 stateElement.length=0; // Fixed by Julian Woods
 stateElement.options[0] = new Option('Select State','');
 stateElement.selectedIndex = 0;
 
 var state_arr = s_a[selectedCountryIndex].split("|");
 
 for (var i=0; i&lt;state_arr.length; i++) {
  stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]);
 }
  $("#" + stateElementId).material_select();
}

function populateCountries(countryElementId, stateElementId){
 // given the id of the &lt;select&gt; tag as function argument, it inserts &lt;option&gt; tags
 var countryElement = document.getElementById(countryElementId);
 countryElement.length=0;
 countryElement.options[0] = new Option('Select Country','-1');
 countryElement.selectedIndex = 0;
 for (var i=0; i&lt;country_arr.length; i++) {
  countryElement.options[countryElement.length] = new Option(country_arr[i],country_arr[i]);
 }

 // Assigned all countries. Now assign event listener for the states.

 if( stateElementId ){
  countryElement.onchange = function(){
   populateStates( countryElementId, stateElementId );
  };
 }
}

populateCountries("country", "state");

$(function () {
    $(document).ready(function () {
        var max_fields = 10; //maximum input boxes allowed
        var wrapper = $("#raghav"); //Fields wrapper
        var add_button = $(".addmore"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function (e) { //on add input button click
            e.preventDefault();
            if (x &lt; max_fields) { //max input box allowed
                x++; //text box increment
                $(wrapper).append('Select Country: &lt;select id="country'+x+'" name="country" class="country"&gt;&lt;/select&gt;  Select State: &lt;select id="state'+x+'" name="state" class="state"&gt;&lt;/select&gt;');
    
                populateCountries("country"+x+"", "state"+x+"");

            }
        });
});

});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="form-group" id="raghav"&gt;  
Select Country:&lt;select id="country" name ="country" &gt;&lt;/select&gt; 
Select State: &lt;select name ="state" id ="state" class="state"&gt;&lt;/select&gt; 
&lt;/div&gt;  
  
&lt;div class="button-div"&gt;
    &lt;input type="button" name="addmore" class="addmore" value="Add More"&gt;
    &lt;/div&gt;  
  
    

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"&gt;&lt;/script&gt; 
     &lt;script&gt;
     $(document).ready(function() {
        $('select').material_select();     //select js
    });
  &lt;/script&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>