JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<!-- Questions -->
<li>
<p>Create a Quiz</p>
<ul id="questioncontainer">
<!-- begin question clone -->
<li class="question">
<ul>
<li class="number">1<li/>
<li class="none">
<label>Question</label>
<input type="input" name="question[]" />
<label>Image</label>
<input type="file" name="uploadfiles[][file]" class="qUploadfile" />
</li>
<li class="none">
<ul class="answerContainer">
<li class="answer">
<label>Answer</label>
<input type="input" name="answer[]" />
<label>Image</label>
<input type="file" name="uploadfiles[][file]" class="aUploadfile" />
</li>
</ul>
</li>
</ul>
<a class="addAnswer" href="#">ADD ANOTHER ANSWER</a>
</li> <!-- close li.question -->
<!-- end question clone -->
</ul>
<a id="addQuestion" href="#">ADD ANOTHER QUESTION</a>
</li>
</ul>
CSS
li.question { padding:15px; background-color:#e5e5e5; margin:5px 0; }
li { border-bottom: 2px solid white; padding:10px; width: 300px; }
li.number {border:none; font-weight:bold; }
ul.answerContainer li {margin-left:15px; }
a {padding: 3px 8px; background-color: #777; color:white; text-decoration:none; }
.none { border:none; }
JavaScript
$(function() {
var emptyQ = $("li.question").clone(),
emptyA = $("li.answer").clone();
$("#addQuestion").live('click', function(e) {
e.preventDefault();
var str = $("li.number:last").text(),
newValue = parseInt(str) + 1;
$('#questioncontainer').append(emptyQ.clone());
$('li.number:last').html(newValue);
});
$(".addAnswer").live('click', function(e) {
e.preventDefault();
$(this).parent().find(".answerContainer").append(emptyA.clone());
});
});