hide and show by ajax
<p>i have this code by html</p>

<pre><code>&lt;div id="a1"&gt;&lt;input type="text" id="ac1" /&gt;&lt;/div&gt;
&lt;div id="a2" style="display:none"&gt;&lt;input type="text" id="ac2" /&gt;&lt;/div&gt;
&lt;div id="a3" style="display:none"&gt;&lt;input type="text" id="ac3" /&gt;&lt;/div&gt;
&lt;div id="a4" style="display:none"&gt;&lt;input type="text" id="ac4" /&gt;&lt;/div&gt;
&lt;div id="a5" style="display:none"&gt;&lt;input type="text" id="ac5" /&gt;&lt;/div&gt;
&lt;div id="a6" style="display:none"&gt;&lt;input type="text" id="ac6" /&gt;&lt;/div&gt;&lt;span id="close" style="display:none"&gt;X&lt;/span&gt;
&lt;div&gt;&lt;input type="button" id="add" value="add" /&gt;&lt;/div&gt;
</code></pre>

<p>and this code by javascript</p>

<pre><code>var i = 2;
$(document).ready(function(){
    $("#add").click(function(){
    if(i &lt;= 6){
        $("#a"+i).show(500);
        ++i;
        if (i == 7){ $(this).hide(500); }
        if (i &gt;= 2){ $("#close").show(500); }
    }
    });

    $("#close").click(function(){
        --i;
        $("#a"+i).hide(500);
        $("#ac"+i).val("");
        if (i == 2){ $(this).hide(500); }
        if (i == 6){ $("#add").show(500); }
    });
});
</code></pre>

<p>i need when click add button i need hide the last one and put new above it </p>
