JSFiddle - React, Tailwind, and code Playground

by M T

HTML

<input type="text" name="input" id="input" size="30" value="What's your name?">
<a href="#" id="addScnt">Enter</a>

<div id="namess">
    <div>
        <label for="names"></label>
    </div>
</div>

CSS

* {
    font-family:Arial;
}
h2 {
    padding:0 0 5px 5px;
}
h2 a {
    color: #224f99;
}
a {
    color:#999;
    text-decoration: none;
}
a:hover {
    color:#802727;
}
p {
    background: white;
    width: 240px;
    height: 60px;
    margin: 10px;
    padding: 30px;
    border:4px solid black;
    text-align: center;
}

input {
    padding:1px;
    border:1px solid #f6f6f6;
    border-radius:6px;
    -moz-border-radius:4px;
    -web-kit-border-radius:4px;
    -khtml-border-radius:4px;
    text-align: center;
}

JavaScript

var $input = $("#input");
var $questions = [ "What's your name?", "Are you married?", "What's your wife's name?", "Do you have children?", "How many children do you have?" ];

$(function () {
    var scntDiv = $('#namess');
    var i = 0;

    $('#addScnt').live('click', function () {
        $('<p><label for="names"><input type="text" name="names_' + i + '" id="names_' + i + '"size="30" value="' + $input.val() + '"></label><a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        $input.val($questions[i]);
        return false;
    });

    $('#remScnt').live('click', function () {
        if (i > 0) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});