Append() & Remove() Textbox, creates unwanted empty space
<p>I am creating a form with dynamic add and remove text boxes. </p>

<p>I'm using jQuery 1.9.1.  I am new to jQuery, so I looked up some examples and found one that used jQuery 1.4.<br>
I made some changes and got it to work with jQuery 1.9.1 but I have a problem. </p>

<p>When an user adds a few boxes, then deletes them down to only one, and then adds one again it acts as if the empty space is taken up still and adds the new one way down below, instead of right after the last one.  </p>

<p>I do not understand what is causing the empty space, but it looks bad so I would like to find a fix.</p>

<p>Here is the full code, you can copy and paste it to see what I am talking about:</p>

<pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).ready(function() {
        var counter = 2;
        $("#addButton").click(function() {
            $("#textboxes").append('&lt;input type="text" name="text' + counter + '" id="text' + counter + '"&gt;&lt;br/&gt;');
            counter++;
        })

        $("#removeButton").click(function() {
            if (counter == 1) {
                alert("No more textbox to remove");
                return false;
            }
            counter--;
            $("#text" + counter).remove();
        });

        $("#submitButton").click(function() {
            var msg = '';
            for (i = 1; i &lt; counter; i++) {
                msg += "\n Textbox #" + i + " : " + $('#text' + i).val();
            }
            alert(msg);
        });
    });
&lt;/script&gt;
&lt;div style="width: 800px; margin: auto; padding-top: 100px;"&gt;
    &lt;form id="form" name="form"&gt;
        &lt;div id="textboxes"&gt;
            &lt;input type="text" name="text1" id="text1"&gt;
            &lt;br/&gt;
        &lt;/div&gt;
        &lt;input type="button" value="Add a field" class="add" id="addButton" /&gt;
        &lt;input type="button" value="Remove a field" class="add" id="removeButton" /&gt;
        &lt;input type="button" value="Submit" class="add" id="submitButton" /&gt;
    &lt;/form&gt;
</code></pre>
