<div id="addNumber">

    <p>How many people would you like to invite?</p>

    <input id="numPeople" type="number" min="0" value="" placeholder="0" />

</div>

<div id="addPeople" style="display:none">

    <p>Enter the invitee's info.</p>

    <div id="memberFields"></div>

    <input type="submit" value="Send Invitations"/>

</div>

body {background: #bassa55; font-family: sans-serif;}

p {margin: 1em 0 .5em}

input {

    font-size: 1.2em;

    border-radius: 4px;

    padding: 4px;

}

input[type="submit"]{

    margin-top: .5em

}

/* oninput event handler (and input event handler event types) on html5 input[type="number"]

   by @girlie_mac

   This quick demo shows that it is ideal to use 'input' event for better user-experience over 'change' (which requires a user to blur the field once), or 'keyup' event (which doesn't fire when you use the up/down arrow to change the values).

    Try this on the browser that supports the html5 input attributes and the html5 oninput event, such as Chrome.

*/

var numPeople = document.getElementById("numPeople"),

    peopleDiv = document.getElementById("addPeople"),

    memberFields = document.getElementById("memberFields");

numPeople.addEventListener("input", function(e) {

    peopleDiv.style.display = "block";

    var num = numPeople.value;

    // count pre-filled fields

    var numNode = memberFields.childNodes.length,

        numDisplay = num - numNode;

    // populate fields

    var html = '<input type="text" value="" name="member" placeholder="Twitter ID or Email" />';

    if (numDisplay >= 0) {

        for (var i = 0; i < numDisplay; i++) {

            var div = document.createElement("div");

            div.innerHTML = html;

            memberFields.appendChild(div);

        }

    } else {

        var numDelete = Math.abs(numDisplay);

        for (var i = 0; i < numDelete; i++) {

            memberFields.removeChild(memberFields.lastChild);

        }

    }

}, false);