JSFiddle - React, Tailwind, and code Playground

by Fernando Leal

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 id="campos"></div>

				<!-- Button (Double) -->
				<div class="form-group">
					<label class="col-md-4 control-label" for="Salvar"></label>
					<div class="col-md-8">
						<button id="Salvar" name="Salvar" class="btn...

JavaScript

$(function() {
	$("#add").click(function() {
		var input = '<div class="dias">'
		input += '<div class="form-group">'
		input += '<label class="col-md-4 control-label" for="Dia">Dia disponível</label>'
		input += '<div class="col-md-4">'
		input += '<select id="Dia" name="Dia" class="form-control">'
		input += '<option value="Segunda">Segunda-Feira</option>'
		input += '<option value="Terça">Terça-Feira</option>'
		input += '<option value="Quarta">Quarta-Feira</option>'
		input += '<option value="Quinta">Quinta-Feira</option>'
		input += '<option value="Sexta">Sexta-Feria</option>'
		input += '<option value="Sabado">Sábado</option>'
		input += '</select>'
		input += '</div>'

		input += '</div>'

		input += '<!-- Multiple Checkboxes (inline) -->'
		input += '<div class="form-group">'
		input += '<label class="col-md-4 control-label" for="Turno">Turno</label>'
		input += '<div class="col-md-4">'
		input += '<label class="checkbox-inline" for="Turno-0"><input type="checkbox" name="Turno" id="Turno-0" value="Manha">Manhã</label>'
		input += '<label class="checkbox-inline" for="Turno-1"><input type="checkbox" name="Turno" id="Turno-1" value="Tarde">Tarde</label>'
		input += '<label class="checkbox-inline" for="Turno-2"><input type="checkbox" name="Turno" id="Turno-2" value="Noite">Noite</label>'
		input += '</div>'
		input += '</div>'
		input += '<a href="#" id="deletar" class="teste" role="button">Remover Dia</a>'
		input += '</div>';

		$("#campos").append(input);
		return false;
	});

	$('body').on('click', ".teste",function() {
		$(this).parent('.dias').remove();
	});
});