Estou tentando clonar um objeto usando Jquery, porém a largura do campo clonado não fica de acordo com o esperado.
HTML
<table class="table table-responsive" id="tableAulas">
<thead>
<tr>
<th>Disciplina</th>
<th>Professor</th>
<th>Carga Horária</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-control bselect" name="professor[]">
<option>Select</option>
</select>
</td>
</tr>
</tbody>
</table>
<p class="text-right">
<a href="javascript:void(0)" class="btn btn-sm btn-success" id="addRowAula"><i class="fa-plus"></i> Adicionar campo</a>
<a href="javascript:void(0)" class="btn btn-sm btn-danger" id="removeRowAula" style="display:none;" ><i class="fa-minus"></i> Remover último campo</a>
</p>
JS
$(".bselect").select2({allowClear: true}).on('select2-open', function()
{$(this).data('select2').results.addClass('overflowhidden').perfectScrollbar();});
$('#addRowAula').on('click', function(){
console.log('add row');
var html ='<tr> <td> <select class="form-control bselect" name=""> <option>Select</option> </select> </td></tr>';
$("#tableAulas > tbody").append(html);
showRowButton();
});
$('#removeRowAula').on('click', function(){
$('#tableAulas tr:last').remove();
showRowButton();
});
function showRowButton(){
var rowCount = $('#tableAulas >tbody > tr').length;
if(rowCount > 1){
$('#removeRowAula').show();
}else{
$('#removeRowAula').hide();
}
}
Deixei também o exemplo no link:https://jsfiddle.net/8bs8onLc/