JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<body>
	<div class="box">
		<div class="question" qId="1">
			<span class="title"><i class="red">*</i>Question<b class="num">1</b>：</span>
			<input class="textInput" type="text"/>
			<a class="add" title="Add">+</a>
			<a class="del" title="Delete"> -</a>
		</div>
		<div class="question-type">
			<span class="title"><i class="red">*</i>Question Type：</span>
			<span class="single"><input rel="singleSel" type="radio" checked="checked"  /><label rel="singleSel">Single Choice</label></span>
			<span class="multiple"><input rel="multipleSel" type="radio" /><label rel="multipleSel">Multiple Choice</label></span>
			<span class="subjective"><input rel="subjective" type="radio" /><label rel="subjective">Subjective Item</label></span>
		</div>
		<div class="answer-group">
			<div class="answer singleSel">
				<p class="item" aId="A">
					Single Choice Answer<b class="num">A</b>：
					<input class="textInput"  /> 
					<a class="add" title="Add">+</a>
					<span class="del" title="Delete">-</span>
				</p>
				<p class="item" aId="B">
					Single Choice Answer<b class="num">B</b>：
					<input class="textInput"  /> 
					<a class="add" title="Add">+</a>
					<a class="del" title="Delete">-</a>
				</p>
			</div>
			<div class="answer multipleSel"style="display:none;">
				<p class="item" aId="A">
					Multiple Choice Answer<b class="num">A</b>：
					<input class="textInput"  /> 
					<a class="add" title="Add">+</a>
					<span class="del" title="Delete">-</span>
				</p>
				<p class="item" aId="B">
					Multiple Choice Answer<b class="num">B</b>：
					<input class="textInput"  /> 
					<a class="add" title="Add">+</a>
					<a class="del" title="Delete">-</a>
				</p>
			</div>
			<div class="answer subjective" style="display:none;">
				<p class="item" aId="A">
					Subjective Item Answer<b class="num">A</b>：
					<input class="textInput"  /> 
					<a class="add" title="Add">+</a>
					<span class="del" title="Delete">-</span>
				</p>
				<p...

CSS

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,selectth,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var,i{font-style:normal;}
code,kbd,pre,samp,del{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;outline:none;-moz-transition: all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img,textarea,select{border:0;outline:none}
textarea{resize:none}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.cf:after{content:'\0020';clear:both;display:block;height:0;}
.cf{*zoom:1;}
.fl{display:inline;float:left;}
.fr{display:inline;float:right;}

.box{
	padding:30px;
}
.box .add,
.box .del{
	cursor:pointer;
	display:inline-block;
	font-size:18px;
	margin-left:5px;
}
.box .textInput{
	border:1px solid #ccc;
	padding:5px;
	line-height:14px;
}
.question-type{
	margin-top:10px;
}
.box .title .red{
	color:#c00;
}
.box .answer{
	padding-left:30px;
	margin-top:10px;
}
.box .single,.box .multiple,.box .subjective{
	margin-right:10px;
} 
.box .single input,.box .multiple input,.box .subjective input{
	margin-right:5px;
	vertical-align:middle;
	vertical-align:-3px\0;
}
.box .item{
	margin-bottom:10px;
}
.box a{
	text-decoration:none;
}

JavaScript

/**
*-----------
@Version: 1.0
@Author Qadir.Du, [email protected]
@Created: 26.10.2013
@Describe Add and delete question,Add and delete answer
*-----------
***/

(function($,undefined){
	'use strict';
	var 
	//save question number
	cacheQ = [1],
	
	//deleted question number array 
	deletedQuestionNumArr =[];
	
	$.question = function(container){
		this.container = container;
	}
	$.question.prototype ={
		initialize:function(){
			this.addQuestion();
			this.deleteQuestion();
			this.changeQuestionType();
			this.addAnswer();
			this.deleteAnswer();
		},
		//add question
		addQuestion:function(){
			var _self = this;
			
			//bind the click event of add
			_self.container.on('.question .add','click',clickAdd);
			function clickAdd(){
				var qId = $(this).parents(".question").attr("qId");
				
				//reassign into this.container
				_self.container = $(this).parents('.box');
				
				var addQid = _self._addQuestionId(),
				clone = _self.container.clone(true);
				clone.find('.question').attr('qId',addQid);
				clone.find('.question .title .num').html(addQid);
				
				//add the elements of new question 
				_self.container.after(clone.css({'opacity':0}));
				if(!clone.is(":animated")) clone.animate({'opacity':'1'},300);
			}
			
		},
		//delete question
		deleteQuestion:function(){
			var _self = this;
			
			//bind the click event of delete
			_self.container.on('.question .del','click',clickDel);
			
			function clickDel(){
				var qId = $(this).parents(".question").attr("qId");
				
				//reassign into this.container
				_self.container = $(this).parents('.box');
				
				if(cacheQ.length<=1){
					alert("手下留情噢，仅有的一个问题咯！");
				}else{
					if(!_self.container.is(":animated"))  
					_self.container.animate({'opacity':0},300,function(){
						_self.container.remove();
					});
				}
				_self._deleteQuestionId(qId);
				
			}
			
		},
	
		//return question number of to be added
		_addQuestionId:function(){
			if(deletedQuestionNumArr.length===0){
				var...