JSFiddle - React, Tailwind, and code Playground

by Zikes

HTML

<a href="#" id="AddTask">Add Task</a>
<form name="MyAwesomeForm" id="MyAwesomeForm">
    <fieldset id="Tasks"></fieldset>
</form>

CSS

/* 
You'll have to include jQuery on the page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Put everything in the JavaScript box in a script tag like so:
<script>
    jQuery(function(){
        // paste code in here
    });
</script>
*/

JavaScript

var task_num=1;
var $form = $('#MyAwesomeForm');
var $fieldset = $('#Tasks');
var $AddTask = $('#AddTask');

$AddTask.click(function(){
    $fieldset.append($([
        '<div class="task_line">',
            '<strong>Task #'+task_num+'</strong>',
            '<input type="text" name="task_summary_'+task_num+'">',
            '<textarea name="task_full_text_'+task_num+'"></textarea>',
            '<a href="#" class="remove_task">X</a>',
        '</div>'
    ].join('')));
    task_num++;
});
$AddTask.click(); // Adds first task line

// Click the X to remove the task
$('.remove_task').live('click',function(){
    $(this).closest('.task_line').remove();
})