JSFiddle - React, Tailwind, and code Playground

by Justin Breen

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[1]"  />
                        <label>Notes</label>
                        <input type="input" name="qnote[1]"  />
                    </li>
                    
                    <li class="none">
                        <ul class="answerContainer">
                            <li  class="answer">
                                <label>Answer</label>
                                <input type="input" name="answer[1][1]"  />
                                <label>Notes</label>
                                <input type="input" name="notes[1][1]"  />
                            </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: 600px; }
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

// Try Updating the jQuery version before finishing

$(function() {
    var questionHolder = $('.question').clone(true);
    
    $("#addQuestion").live('click', function(e) {
        e.preventDefault();
        var str = $("li.number:last").text(),
        newValue = parseInt(str,10) + 1;
        
        var newQ = questionHolder.clone();
        newQ.find('input')
            .each(function(){
                this.name = this.name.replace(/\[(\d+)\]/,'['+ newValue +']');
            })
            .end()
            .find('.number')
            .html(newValue)
            .end()
            .appendTo('#questioncontainer');
    });

    $(".addAnswer").live('click', function(e) {
        e.preventDefault();
        var group = $(this).parent();
        group.find(".answer:last")
            .clone(true)
            .find('input')
            .each(function(){
                this.name = this.name.replace(/\[(\d+)\]$/,
                                              function(str,p1){
                                                  return '[' + (parseInt(p1,10)+1) + ']';
                                              });
            })
            .end()
            .appendTo(
                group.find('.answerContainer') );
    });
});