title: Add & Delete HTML DIV Dynamically
body: <p>I have a problem to add and delete html div dynamically. Below is the simplified code that I am working on:</p>
  
  <pre><code>&lt;input type="button" value="+ Add More Division" name="add_div" id="add_div"&gt;
  
  &lt;div id="div_1"&gt;
      &lt;input type="button" value="+ Delete Div A" name="del_a" id="del_a"&gt;
  &lt;/div&gt;
  
  &lt;div id="div_2"&gt;
      &lt;input type="button" value="+ Delete Div B" name="del_b" id="del_b"&gt;
  &lt;/div&gt;
  
  &lt;div id="div_3"&gt;
      &lt;input type="button" value="+ Delete Div C" name="del_c" id="del_c"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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().</p>
  
  <p>Thanks for your help.</p>
  
  <p><strong>Edited:</strong>
  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.</p>