[jQuery] Add/Delete form elements

[tomh88]

Hi,

I have two issues the following script.

1. The delete button will only delete the first form element. The rest
of the delete buttons do nothing.
2. The add button adds a new element after the first one. I need it to
add it at the end of the list (i.e. always last).

The jquery is:

//Add a new question

$(document).ready(function() {
     var num     = $('.clonedInput').size();

         if (num == 1)
         $('.btnDel').attr('disabled','disabled');

        //ADD BUTTON
      $('#btnAdd').click(function() {
        var num     = $('.clonedInput').size();

        var newElem = $('#input').clone();

        newElem.children(':first');
        $('#input').after(newElem);

        $('.btnDel').attr('disabled','');

                //set number of available questions
        if (num == 4)
                $('#btnAdd').attr('disabled','disabled');
      });

        //DELETE BUTTON

                $(".btnDel").click(function(){
                  $(this).closest("div").remove()
                })
                $('.btnDel').attr('disabled','');

        });

});

And my markup is:

    <form name="create" method="post" action="create.php">

                <input type="hidden" id="id" value="1">

        <label for="title">Title</label>
        <input name="myusername" type="text" id="myusername"><br /
><br />
            <div id="input" class="clonedInput">
                Question: <input type="text" name="question"
id="question" />
                <input type="button" class="btnDel" value="Remove
question" />
            </div>
        <div>
            <input type="button" id="btnAdd" value="Add another
question" />
        </div>
        <input type="submit" name="submit" value="Create survey">

    </form>

Any help very much appreciated - I'm assuming the problems are
related.   :)