jquery - how to initialize select box on button click -

i using jquery select2 plugin working fine when add select2 box on button click using function add_field add disabled select2 box. here sample code

 <div id="divselectcontaioner">         <div id="divselect">             <select class="e1" style="width: 200px;">                 <option value="al">alabama</option>                 <option value="wy">wyoming</option>             </select>             <br/>         </div>     </div>     <button id="add_field">add field</button> 

and js add select2 box is

$(function() {          // initilizing select box              $(".e1").select2();              // add new select box             $('#add_field').click(function(){                 $('#divselectcontaioner').append($('#divselect').html());                });         }); 

i unable figure out problem. how can it??

this should work

$(function() {      // initilizing select box          var select = $('.e1').clone();          $(".e1").select2();          // add new select box         $('#add_field').click(function(){             var newselect = select.clone();             $('#divselectcontaioner').append(newselect);             newselect.select2();            });     }); 

select2 plugin replaces original select box custom html. first of need have copy of original select:

var select = $('.e1').clone(); 

when add new select our original copy, make copy again:) , initiate with

newselect.select2();