JSFiddle - React, Tailwind, and code Playground

by superuntitled

HTML

<ul id="questioncontainer">

<!-- begin question clone -->
<li class="question">
<ul>
     
    <li class="q">
        <p class="number">1</p>
        <h2>QUESTION</h2>
        <label>Title</label><input type="text" name="question[1][text]"  />
        <label>Text</label><input  type="text" name="question[1][url]"  />
        <label>File</label><input  type="file" name="question[1][file]"  />
</li>
    
    <li class="none">
        <ul class="answerContainer">
            <li  class="answer">
                 <h2>ANSWER</h2>
                 <label>Title</label><input type="text" class="a" name="answer[1][text][]"  />
                 <label>Text</label><input  type="text" name="answer[1][url][]"  />
                 <label>File</label><input  type="file" name="answer[1][file][]"  />
            </li>                 
        </ul>
    </li>
</ul>

<a class="addAnswer" href="#">ADD ANOTHER ANSWER</a>

</li>
<!-- end li.question  -->
</ul>
<!-- end ul#questioncontainer -->

<a id="addQuestion" href="#">ADD ANOTHER QUESTION</a>

CSS

/* question form */
h2 { color:#fff;}
li.q, li.answer, .form li { padding:5px; margin:5px 0; background-color: #ddd;  }
a.addAnswer,a#addQuestion,a.deleteQuestion { padding:5px 8px; background-color:#777; color:white; text-decoration:none; display:block; width:200px; font-weight:bold; margin: 10px 0; -moz-border-radius: 5px;
border-radius: 5px;  }
a.deleteQuestion {}
a.addAnswer:hover,a#addQuestion:hover { background-color:#222; }
li.none, ul.none li { border:none; }
.form li.question  { border: 1px solid #888; padding: 10px; margin-bottom: 10px; }
.form li.answer { border-top: 2px solid white;border-bottom: 2px solid white;}
.form li.answer:hover { background-color: #eee; }
.form li.question input {width: 400px;}
input.uploadfile { display:block; width:200px; }
.number { font-size: 18px; color: #999; font-weight: bold; width: 35px; display: block; }
.file { padding: 10px 0; }
.file  input { padding: 0px;}
input { width: 100px; }

JavaScript

$(document).ready(function() {
$(function() {
    var questionHolder = $('.question').clone(true);
    
    $("#addQuestion").live('click', function(e) {
        e.preventDefault();
        var str = $("p.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')
            .end()
            .find(".addAsset").click(function(){
                 $(this).siblings(".file").toggle();
                 return false;
             })
             ;
    });

    $(".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()
            .find(".file").css("display", "none")
            .end()
            .find(".radio").attr('checked', false)
            .end()
            .appendTo(
            group.find('.answerContainer') )
            .end()
             .find("input.a").val('');
            });
});
        });