JSFiddle - React, Tailwind, and code Playground

by Doeke Wartena

HTML

<div class="questionFormTemplate">
    <form action="utils/handleForm.php" method="post">
        <table>
            <tr>
                <td><input type="text" name="question" value="question?"/></td>                                
            </tr>
            <tr>
                <td><input type="text" name="answer[]" value="answer 1"/></td>
                <td><input type="button" value="remove" class="remove"/></td>                                
            </tr>
            <tr>
                <td><input type="text" name="answer[]" value="answer 2"/></td>
                <td><input type="button" value="remove" class="remove"/></td>
            </tr>            
            <tr>
                <td><input type="button" value="add answer"/></td>
            </tr>
        </table>
        <input type="submit" value="update" />  
    </form>
</div>

<div id="container"></div>

CSS

.questionFormTemplate {
    display: none;
}

JavaScript

// add some question forms to the container
var questionFormTemplate = $('.questionFormTemplate').html();

console.log(questionFormTemplate);

for(var i = 0; i < 8; i++) {
   $('#container').append(questionFormTemplate);
}

// make the buttons work
$('input[type="button"][value="remove"]').on("click", function() {
    $(this).parent().parent().remove();
});

$('input[type="button"][value="add answer"]').on("click", function() {
    $(this).parent().parent().parent().append('<tr><td><input type="text" name="answer[]" value="answer"/></td><td><input type="button" value="remove" class="remove"/></td></tr>');
});