Cloned Select2 não está respondendo
Eu estou tentando clonar uma linha que contém select2 ferramenta, quando eu clonar essa linha usando jQuery o select2 clonado não está respondendo.Na imagem dada abaixo primeiro select2 que é original está funcionando bem, mas 2 e 3 select2 que são clonados não respondendo
fragmento de código:
$(document).ready(function() {
var clonedRow = $('.parentRow').clone().html();
var appendRow = '<tr class = "parentRow">' + clonedRow + '</tr>';
$('#addRow').click(function() {
$('#test').after(appendRow);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="parentRow" id="test">
<td>
<g:message code="educationDetails.educationLevel.label" default="Education Level" />
</td>
<td>
<div style="float: left;">
<g:select name="degree.id" from="${EducationalDegree.list()}" optionKey="id" optionValue="title" noSelection="['': '']" id="degree" value="${cvEducationDetailCO?.degree?.id}" onchange="changeGradeSelectData(this.value)" />
</div>
<div>
<a href="javascript:void(0)" id="addRow">
<img alt="" title="Add Additional Education Level" src="/static/images
/top_submit_1.gif">
</a>
</div>
</td>
</tr>