JSFiddle - React, Tailwind, and code Playground

by besign

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="questions" class="questions-wrapper">
	
	<a id="add-question" href="#" class="wrap-action add-question">
		<span class="button-instruction">Agregar otra pregunta</span> <span class="btn-action btn-add">+</span>
	</a>	

	<div id="step-1" class="steps">

		<div id="question-" class="question addme">
			<input type="text" name="model_question[]" placeholder="Escriba la pregunta" required="required" class="form-control input-lg">
			
			<a id="add-answer" href="#" class="wrap-action add-answer">
				<span class="button-instruction">Agregar respuesta</span> <span class="btn-action btn-add">+</span>
			</a>
			<div id="answer-" class="answer addme">
				<input type="text" name="model_question[]" placeholder="Respuesta " class="form-control input-lg">
				
				<div class="remove-action col-lg-12 col-xs-12 text-right" style="display:none">
					<a href="#" class="wrap-action remove-answer">
						<span class="button-instruction">Eliminar </span> <span class="btn-action btn-delete">+</span>
					</a>
				</div>
			</div>
		</div>

	</div>
</div>

CSS

.steps { padding:30px; font-family: Tahoma }
.answers { }

JavaScript

var startingID = 0;
	$(".add-answer").click(function(e){

		startingID++;

		var newid = "reasonId_"+startingID;
		console.log("add A " +startingID);
		$(".answer:last").clone().prop({ id: newid , value: startingID }).insertAfter('.answer:last');
		$("#"+newid).find(".remove-action").css("display", "block");
		$("#"+newid).find("input").val("");
		awakeMe ();
		//console.log(e);
		e.preventDefault();
	});

	function awakeMe () {
		$(".remove-answer").click(function(e){
			console.log("remove A " +e);
			$(this).closest(".practice-format").remove();
			e.preventDefault();
		});
	}