selectizeで選択ボックスを複製する方法は？

Question

同じページにselect-beast Selectizeというタイプのいくつかの選択ボックスが必要です。 私はselect-beastのセクション全体をコピー・ペーストするだけで、それを複製しようとしました。 ページでは、最初の選択ボックスのみが表示され、正しく動作します。複製されたものも表示されますが、最初のものと同じようには表示されません。スタイルは設定されず、ドロップダウンは機能しますが、テキスト入力は無効になります。

最初のものとまったく同じHTMLコードですが、元の選択ボックスが正しく表示されたのはなぜですか？残りの部分は表示されません。助けてください。コピー＆ペーストのための オリジナルコード：

<div id="wrapper"> 
    <h1>Selectize.js</h1> 
    <div class="demo"> 
     <h2>&lt;select&gt;</h2> 
     <div class="control-group"> 
      <label for="select-beast">Beast:</label> 
      <select id="select-beast" class="demo-default" placeholder="Select a person..."> 
       <option value="">Select a person...</option> 
       <option value="4">Thomas Edison</option> 
       <option value="1">Nikola</option> 
       <option value="3">Nikola Tesla</option> 
       <option value="5">Arnold Schwarzenegger</option> 
      </select> 
     </div> 

     <script> 
      $('#select-beast').selectize({ 
       create: true, 
       sortField: { 
        field: 'text', 
        direction: 'asc' 
       }, 
       dropdownParent: 'body' 
      }); 
     </script> 
    </div> 
</div> 

Answer 1

それは非常に簡単です：

$('[id^=select-beast]').selectize({ 
 
    create: true, 
 
    sortField: { 
 
     field: 'text', 
 
     direction: 'asc' 
 
    }, 
 
    dropdownParent: 'body' 
 
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.2.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.css"/> 
 
<div id="wrapper"> 
 
    <div class="demo"> 
 
     <h2>&lt;select&gt; #1</h2> 
 
     <div class="control-group"> 
 
      <label for="select-beast">Beast:</label> 
 
      <select id="select-beast" class="demo-default" placeholder="Select a person..."> 
 
       <option value="">Select a person...</option> 
 
       <option value="4">Thomas Edison</option> 
 
       <option value="1">Nikola</option> 
 
       <option value="3">Nikola Tesla</option> 
 
       <option value="5">Arnold Schwarzenegger</option> 
 
      </select> 
 
     </div> 
 
     <h2>&lt;select&gt; #2</h2> 
 
     <div class="control-group"> 
 
      <label for="select-beast2">Country:</label> 
 
      <select id="select-beast2" class="demo-default" placeholder="Select a country..."> 
 
       <option value="">Select a country...</option> 
 
       <option value="BE">Belgium</option> 
 
       <option value="NL">Netherlands</option> 
 
       <option value="FR">France</option> 
 
      </select> 
 
     </div> 
 
    </div> 
 
</div>

（もthis Fiddle参照）