title: Cloned Select2 is not responding
body: <p>I am trying to clone a row which contains select2 tool ,when i clone that row using jQuery the cloned select2 is not responding.In image given below first select2 which is original is working fine but 2nd and 3rd select2 which are cloned not responding</p>
  
  <p><a href="https://i.stack.imgur.com/70aZ0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/70aZ0.png" alt=""></a></p>
  
  <p>code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var clonedRow = $('.parentRow').clone().html();
    var appendRow = '&lt;tr class = "parentRow"&gt;' + clonedRow + '&lt;/tr&gt;';
    $('#addRow').click(function() {
      $('#test').after(appendRow);
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;tr class="parentRow" id="test"&gt;
    &lt;td&gt;
      &lt;g:message code="educationDetails.educationLevel.label" default="Education Level" /&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;div style="float: left;"&gt;
        &lt;g:select name="degree.id" from="${EducationalDegree.list()}" optionKey="id" optionValue="title" noSelection="['': '']" id="degree" value="${cvEducationDetailCO?.degree?.id}" onchange="changeGradeSelectData(this.value)" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="javascript:void(0)" id="addRow"&gt;
          &lt;img alt="" title="Add Additional Education Level" src="/static/images
                                                                  /top_submit_1.gif"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>