Reveal Extra Fields One at a Time by Clicking a Button (jQuery)

I've recently started learning jQuery and I think I'm in love :)

Here's what I am trying to do...

Hide all li input fields except the first one. Have a button below the first input field that reveals the 2nd input field when clicked. The button must move below the newly revealed input field.

When clicked again it must repeat the above until there aren't any more input fields.

I have tried a few ideas, the latest one is here. I know it's wrong, I am really stumped on this one, any help is greatly appreciated.

He开发者_Go百科re is my temporary solution under "Show extra Refill Fields".

http://jsfiddle.net/nV9gE/21/

<div id="container">
        <div id="content">

           <h2>Refill Your Prescription(s)</h2>
      <ul id="pofields">

        <li>
            <input name="prescription_1" type="text" size="40">
        </li>

      </ul>

            <input id="add" type="button" value="Refill Another Prescription">

        </div>
</div>

I changed the names of some of your id's and classes as you shouldn't use capital letters to start a id/class name

$(document).ready(function() {
        $( "#add" ).click(function(){
            //get the name of the next input element
            var name = $('#pofields li').length + 1
            $('#pofields li:last').after('<li><input name="prescription_' + name + '" type="text" size="40"/></li>')
        });

});

I have simplified your markup just for readability See the working example here..

    <input type="text" /> 
    <input class="hide" /> 
    <input class="hide" /> 
    <input class="hide" /> 
    <input class="hide" /> 
<br /><button id="refill">Refill Another</button>
<style>
 .hide{
    display:none;
    visibility:collapse;
 }
 input{
    display:block;
    clear:both;
 }    
</style>

And a tiny bit of jQuery.. :)

$(document).ready(function() {
    $('#refill').click(function(){
        $('input').not(':visible').first().removeClass('hide');
        //thats all you need!
    });    
});

You can use a container for input fields, so when you click on button you need just append another text field to this container. you can clone first text field, change its parameters and then append it to container.

<div id="container">
    <input type="text" name="something[]" />
</div>
<input type="button" name="add" />
<script>
    $("input[name=add]").click(function(){
        $("#container").append('<input type="text" name="something[]" />');
    });
</script>