Add & Delete HTML DIV Dynamically - jquery-selectors

Question

I have a problem to add and delete html div dynamically. Below is the simplified code that I am working on:
<input type="button" value="+ Add More Division" name="add_div" id="add_div">
<div id="div_1">
<input type="button" value="+ Delete Div A" name="del_a" id="del_a">
</div>
<div id="div_2">
<input type="button" value="+ Delete Div B" name="del_b" id="del_b">
</div>
<div id="div_3">
<input type="button" value="+ Delete Div C" name="del_c" id="del_c">
</div>
This is the situation, div_1, div_2 and div_3 can be added and removed dynamically. div_1 will always be associated with button id del_a, div_2 with del_b and div_3 with del_c. It is only 3 divs maximum can be added.
I need jquery that can add and remove the div and reuse div_1, div_2 and div_3 along with the associated button ids.
For example, if the user delete the div_2, and the user want to add more division (which is only 1 more can be added), the jquery will try to find the existing divs, and somehow remember it. Since div_2 is not exist, div_2 will be added, does not matter the order. div_3 can go first before or after the other divs.
I just want to give freedom for the user to edit the form, since this massive form. I do not know how to do this in jQuery using .each().
Thanks for your help.
Edited:
By default, only div_1 is exist on the form. The user can have the freedom to add another 2 divs to add more divs. The user is also have the capability to delete div_1 when either div_2 or div_3 exist. One div must be exist.

Answer 1

you can use detach() function....it will simply remove the div and if you want to add it again have, a reference of that div and add it again..something like this
suppose, user deleted the first div like this...
var div
$('#del_a').click(function(){
div= $('#div_1').detach();
});
...
and when user click on add button you can do something like this...
$('#add_div').click(function(){
$(div).appendTo('where you want to append')
});
i think this might help you..

Answer 2

If you want to delete div dynamically den use it:
$('#mydiv').empty();
Add /Remove dynamically HTML element with jQuery plz see below
Add /Remove dynamically HTML element with jQuery

Answer 3

You can have three variables acting as flags for the divs present. When the add div button is clicked, check for the first flag which is not set, add that div and set the flag for that particular div. If all three flags are set, then disable the add more divs button. Hope this helps.

Answer 4

Its working fine (Plz optimized this code) :)
<script type="text/javascript" >
$(document).ready(function(){
$('#add_div').click(function(){
if(($('#del_a').is(":hidden"))){$("#del_a").show(); return; }
if(($('#del_b').is(":hidden"))){$("#del_b").show(); return; }
if(($('#del_c').is(":hidden"))){$("#del_c").show(); return; }
});
$('#del_a').click(function(){
if($('#del_b').is(":hidden") && $('#del_c').is(":hidden") )
return;
$('#del_a').hide();
});
$('#del_b').click(function(){
if($('#del_a').is(":hidden") && $('#del_c').is(":hidden") )
return;
$('#del_b').hide();
});
$('#del_c').click(function(){
if($('#del_a').is(":hidden") && $('#del_b').is(":hidden") )
return;
$('#del_c').hide();
});
});