Add/remove divs using jquery
<p>I changed my code to the following:</p>

<pre><code>$(document).ready(function () {
            $('#add').on('click', function () {
                var $contacts = $(".contact");
                $("&lt;div/&gt;").append($("&lt;input&gt;", {
                  "type": "text",
                  "name": "contact[" + $contacts.length + "][name]"
                })).insertAfter($contacts.last());
            });
          });   

&lt;div class="contact"&gt;
Name: &amp;nbsp; &lt;input type="contact[0][name] type="text"&gt;
&lt;/div&gt;
&lt;div class="contact"&gt;
Name: &amp;nbsp; &lt;input type="contact[1][name] type="text"&gt;
&lt;/div&gt;
&lt;div class="contact"&gt;
Name: &amp;nbsp; &lt;input type="contact[2][name] type="text"&gt;
&lt;/div&gt;
</code></pre>

<p>This works and allows me to add another row. However, I need help on two things:</p>

<p>1) When I add another row and hit submit. The $_POST array only shows the first three values, not the dynamically added arrays.</p>

<p>2) How do I add more the text to the appended html? It only shows the input box, not "Name: " in front of it.</p>

<p>Thanks!</p>

<p>This is what print_r($_POST) is returning (I have other form fields in there):</p>

<pre><code> Post:
 Array
  (
[custsubmit] =&gt; Submit
[contact] =&gt; Array
    (
        [0] =&gt; Array
            (
                [id] =&gt; 
                [name] =&gt; name1
            )

        [1] =&gt; Array
            (
                [id] =&gt; 
                [name] =&gt; name2
            )

        [2] =&gt; Array
            (
                [id] =&gt; 
                [name] =&gt; name3
            )

    )
)
</code></pre>
