title: Kartik Select2 not working after appending it with jquery
body: <p>I have problem with kartik select2 widget. I am trying to create dynamic form with jquery. First, I created two fields with kartik select2 in div element. Then I cloned all content of the div and append it into the div. But, cloned select2 not working when it will be clicked. Could you help me?
  <a href="https://i.stack.imgur.com/KjIpM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KjIpM.png" alt="enter image description here"></a></p>
  
  <p>Code:
  codes in a javascript file:</p>
  
  <pre><code>$(document).ready(function(){
      $(document).on("click", "#add-department-btn", function(e){
        e.preventDefault();
        console.log("Clicked");
  
        var option_name = Math.random()*1000000;
        option_name = parseInt(option_name);
        var id = $(".add-departments-container .copyPattern").data('id');
        var row = $(".add-departments-container .copyPattern").clone().removeClass('copyPattern');
  
        row.appendTo(".add-departments-container");
  
        return false;
     });
  });
  </code></pre>
  
  <p>_form.php file:</p>
  
  <pre><code>&lt;div class="row"&gt;
                  &lt;a href="javacript:void(0)" id="add-department-btn"&gt;+ Qo'shish&lt;/a&gt;
              &lt;/div&gt;  
              &lt;div class="add-departments-container"&gt;
                  &lt;?= Yii::$app-&gt;controller-&gt;renderPartial('department/_department', [
                      'departments' =&gt; $departments,
                      'allDepartments' =&gt; $allDepartments,
                      'model' =&gt; $newDepartments,
                      'university' =&gt; $model,
                      'allLevels' =&gt; $allLevels,
                      'class' =&gt; 'copyPattern'
                      ]); ?&gt;
              &lt;/div&gt; 
  </code></pre>
  
  <p>_department.php file:</p>
  
  <pre><code>&lt;div class="&lt;?= $class ?&gt;" data-id=""&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-5"&gt;
              &lt;?= Html::label('Fakultet', 'University['. $id .'][departments]') ?&gt;
              &lt;?= Select2::widget([
                  'name' =&gt; 'University['. $id .'][departments]',
                  'value' =&gt; '',
                  'data' =&gt; $allDepartments,
                  'options' =&gt; ['placeholder' =&gt; 'Select department ...', 'id' =&gt; 'department-'.$id],
              ]); ?&gt;
          &lt;/div&gt;
          &lt;div class="col-md-5"&gt;
              &lt;?= Html::label('Levels', 'University['. $id .'][departments]') ?&gt;
              &lt;?= Select2::widget([
                  'name' =&gt; 'University['. $id .'][levels]',
                  // 'value' =&gt; ArrayHelper::getColumn($levels-&gt;departments, 'department_id'),
                  'data' =&gt; $allLevels,
                  'options' =&gt; ['multiple' =&gt; true, 'placeholder' =&gt; 'Select states ...', 'id' =&gt; 'university-levels-'.$id],
                  'pluginOptions' =&gt; [
                          'allowClear' =&gt; true,
                          'tags'=&gt;true,
                          'maximumInputLength'=&gt;10,
                      ],
              ]); ?&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
              &lt;a href="javacript:void(0)" id="delete-department-btn"&gt;Delete&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>