JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<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>
CSS
.bselect{
width: 583px;
}
JavaScript
$(function(){
InicializarSelect();
})
$('#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);
InicializarSelect();
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();
}
}
function InicializarSelect(){
$(".bselect").select2({allowClear: true}).on('select2-open', function(){$(this).data('select2').results.addClass('overflow-hidden').perfectScrollbar();});
}