JSFiddle - React, Tailwind, and code Playground
HTML
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Professores > Novo Professor</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Professores">Nome</label>
<div class="col-md-6">
<input id="Professores" name="Professores" type="text" placeholder="Professor" class="form-control input-md">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="Dia">Dia disponível</label>
<div class="col-md-4">
<select id="Dia" name="Dia" class="form-control">
<option value="Segunda">Segunda-Feira</option>
<option value="Terça">Terça-Feira</option>
<option value="Quarta">Quarta-Feira</option>
<option value="Quinta">Quinta-Feira</option>
<option value="Sexta">Sexta-Feria</option>
<option value="Sabado">Sábado</option>
</select>
</div>
<div class="col-md-1"> <a href="#" id="add" class="btn btn-primary" role="button">Adicionar Dia</a>
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="Turno">Turno</label>
<div class="col-md-4">
<label class="checkbox-inline" for="Turno-0">
<input type="checkbox" name="Turno" id="Turno-0" value="Manha">Manhã</label>
<label class="checkbox-inline" for="Turno-1">
<input type="checkbox" name="Turno" id="Turno-1" value="Tarde">Tarde</label>
<label class="checkbox-inline" for="Turno-2">
<input type="checkbox" name="Turno" id="Turno-2" value="Noite">Noite</label>
</div>
</div>
<div...
JavaScript
$(function () {
$("#add").click(function () {
var formGroup = $('#Dia').closest('.form-group').clone();
formGroup.find('select').prop('id', '');
formGroup.find('#add').prop('id', '').addClass('teste').html('Remover dia');
$("#campos").append(formGroup);
return false;
});
$('#campos').on('click', '.teste', function () {
$(this).closest('.form-group').remove();
});
});