jQuery Javascript组合列表

I am trying to create a form in which I can have a list and an input box/text box. What I want is when a user types in the text box a value and clicks add to the list, the value should be added to the list. Then once the person presses submit, the PHP code should be able to use the values obtained from list for procedure. I am trying to do it in PHP and HTML but a few have suggested jQuery in JS. Please help with what you know or how I can do this.

If you dont understand I have a diagram for what I want to do...

enter image description here

<?php
    $Fname = $_POST["Fname"];


    if (!isset($_POST['submit'])) { // if page is not submitted to itself echo the form
    ?>


    <html>
    <head>
    <title>Personal INFO</title>


    <style type="text/css">
      body {
      background-image: url("http://dev.icalapp.rogersdigitalmedia.com.rogers-test.com/rogers_blackberry_8900.jpg");
      background-position: 50% 50%;
      background-repeat: repeat;
    }
    </style>



    </head>




    <body>
    <form method="post" action="<?php echo $PHP_SELF;?>">



    <span style="font-family:Helvetica;font-size:22px;font-style:normal;font-weight:bold;text-decoration:underline;text-transform:capitalize;color:FFFFFF;background-color:990033;">Amount of Numbers</span> <input type="text" style="text-align:center" size="12" maxlength="50" name="Fname" ><br />


    <input type="submit" value="submit" name="submit">
    </form>
    <?
    } 

    ?>

Try something like this:

JS:

$('#add').click(function(){

    var input = $('#addInput');
    var display = $('#display');
    var form = $('#addForm');

    if($.trim(input.val()).length > 0){ //is there input?
        display.append($('<p>',{text: input.val()}));
        form.append($('<input>',{value: input.val(), type: 'hidden', name: 'added[]'}));
        input.val('');
    }

})

HTML:

<input id="addInput"/> <button id="add">Add</button>

<div id='display'></div>

<form action="something.php" id="addForm">
    <input type="submit" value="SUBMIT"/>
</form>

And then all of the things you add should be in an array called $_POST['added']

DEMO: http://jsfiddle.net/maniator/aksEw/

With jquery you can make a quick solution like this: http://jsfiddle.net/7qTWd/1/

$("document").ready(function(){

    $("span.add").click(function(){
        $("textarea").val( $("textarea").val()+"
"+$("input").val());
    });
});

<input default="put text"/>
<span class="add">addText</span>
<textarea></textarea>