title: Add and Delete fields dynamically jquery
body: <p>I am adding and deleting fields dynamically.
  I am using jquery hide show to dynamically load new textarea or delete (hide)</p>
  
  <p>I am aware of the append method as well by for loop but as I am doing this in wordpress where textrea = wp_editor so I can not use the append method and hence need to add static html and then use hide show.</p>
  
  <p>I am able to achieve the dynamic adding of the fields as well as deleting fields dynamically.</p>
  
  <p>The only issue am facing is On delete, I want that the add field should again appear.
  In short eg: I have limit of 5 fields for 1 group as in fiddle I have shown 3 differrent groups each with a limit of 5.
  SO for each group when I click on "Add More" there are total 5 fields visible for that group but If I delete any one of the field, total remains to be 4 with NO ADD MORE. SO, Is it possible to have ADD More again if a field is deleted so IN SHORT unless there are five fields in a group ADD MORE should be there.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/5u73Ltvq/" rel="nofollow">JS Fiddle</a>
  Here is the sample code</p>
  
  <pre><code>&lt;div class="col_box"&gt;
          &lt;div class="col_3"&gt;
              &lt;div id="rwd11" class="txtara_cls"&gt;
                  &lt;div class="col_txt_lft"&gt;
                      &lt;textarea class="result11"&gt;aaaa&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="rwd12" class="txtara_cls" style="display:none;"&gt;
                  &lt;div class="col_txt_lft"&gt;
                      &lt;textarea class="result12"&gt;bbbb&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="col_del_rght"&gt;
                      &lt;a href="#"  onclick="document.getElementById('rwd12').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Delete&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="rwd13" class="txtara_cls" style="display:none;"&gt;
                  &lt;div class="col_txt_lft"&gt;
                      &lt;textarea class="result13"&gt;cccc&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="col_del_rght"&gt;
                      &lt;a href="#"  onclick="document.getElementById('rwd13').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Delete&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="rwd14" class="txtara_cls" style="display:none;"&gt;
                  &lt;div class="col_txt_lft"&gt;
                      &lt;textarea class="result14"&gt;ddddd&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="col_del_rght"&gt;
                      &lt;a href="#"  onclick="document.getElementById('rwd14').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Delete&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="rwd15" class="txtara_cls" style="display:none;"&gt;
                  &lt;div class="col_txt_lft"&gt;
                      &lt;textarea class="result15"&gt;eeeee&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="col_del_rght"&gt;
                      &lt;a href="#"  onclick="document.getElementById('rwd15').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Delete&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="hide_11" class="add_extra"&gt;         
                  &lt;a id="hide_1_1" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Add More Results&lt;/a&gt;
              &lt;/div&gt;       
              &lt;div id="hide_12" class="add_extra" style="display:none;"&gt;
                  &lt;a id="hide_1_2" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Add More Results&lt;/a&gt;
              &lt;/div&gt;       
              &lt;div id="hide_13" class="add_extra" style="display:none;"&gt;
                  &lt;a id="hide_1_3" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Add More Results&lt;/a&gt;
              &lt;/div&gt;       
              &lt;div id="hide_14" class="add_extra" style="display:none;"&gt;  
                  &lt;a id="hide_1_4" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Add More Results&lt;/a&gt;
              &lt;/div&gt;    
          &lt;/div&gt;
      &lt;/div&gt;  
      &lt;div class="col_box"&gt;
          &lt;div class="col_3"&gt;
              &lt;div id="rwd21" class="txtara_cls"&gt;
                  &lt;div class="col_txt_lft"&gt;
                      &lt;textarea class="result21"&gt;ffff&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="rwd22" class="txtara_cls" style="display:none;"&gt;
                  &lt;div class="col_txt_lft"&gt;
                      &lt;textarea class="result22"&gt;ggggg&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="col_del_rght"&gt;
                      &lt;a href="#"  onclick="document.getElementById('rwd22').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Delete&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="rwd23" class="txtara_cls" style="display:none;"&gt;
                  &lt;div class="col_txt_lft"&gt;
                      &lt;textarea class="result23"&gt;hhhhh&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="col_del_rght"&gt;
                      &lt;a href="#"  onclick="document.getElementById('rwd23').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Delete&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="rwd24" class="txtara_cls" style="display:none;"&gt;
                  &lt;div class="col_txt_lft"&gt;
                      &lt;textarea class="result24"&gt;iiiii&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="col_del_rght"&gt;
                      &lt;a href="#"  onclick="document.getElementById('rwd24').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Delete&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="rwd25" class="txtara_cls" style="display:none;"&gt;
                  &lt;div class="col_txt_lft"&gt;
                      &lt;textarea class="result25"&gt;jjjjj&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="col_del_rght"&gt;
                      &lt;a href="#"  onclick="document.getElementById('rwd25').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Delete&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="hide_21" class="add_extra"&gt;         
                  &lt;a id="hide_2_1" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Add More Results&lt;/a&gt;
              &lt;/div&gt;       
              &lt;div id="hide_22" class="add_extra" style="display:none;"&gt;
                  &lt;a id="hide_2_2" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Add More Results&lt;/a&gt;
              &lt;/div&gt;       
              &lt;div id="hide_23" class="add_extra" style="display:none;"&gt;
                  &lt;a id="hide_2_3" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Add More Results&lt;/a&gt;
              &lt;/div&gt;       
              &lt;div id="hide_24" class="add_extra" style="display:none;"&gt;  
                  &lt;a id="hide_2_4" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"&gt;&lt;span class="icon-trash icon"&gt;&lt;/span&gt;Add More Results&lt;/a&gt;
              &lt;/div&gt;    
          &lt;/div&gt;
      &lt;/div&gt;  
  </code></pre>
  
  <p>Here is the JS part</p>
  
  <pre><code>        jQuery(document).ready(function () {
          jQuery('#hide_1_1').click(function() {
             jQuery('#rwd12').css('display', 'block');
              jQuery('#hide_11').css('display', 'none');
              jQuery('#hide_12').css('display', 'block');
          });
          jQuery('#hide_1_2').click(function() {
             jQuery('#rwd13').css('display', 'block');
              jQuery('#hide_12').css('display', 'none');
              jQuery('#hide_13').css('display', 'block');
          });
          jQuery('#hide_1_3').click(function() {
             jQuery('#rwd14').css('display', 'block');
              jQuery('#hide_13').css('display', 'none');
              jQuery('#hide_14').css('display', 'block');
          });
          jQuery('#hide_1_4').click(function() {
             jQuery('#rwd15').css('display', 'block');
              jQuery('#hide_14').css('display', 'none');
          });
          jQuery('#hide_2_1').click(function() {
             jQuery('#rwd22').css('display', 'block');
              jQuery('#hide_21').css('display', 'none');
              jQuery('#hide_22').css('display', 'block');
          });
          jQuery('#hide_2_2').click(function() {
             jQuery('#rwd23').css('display', 'block');
              jQuery('#hide_22').css('display', 'none');
              jQuery('#hide_23').css('display', 'block');
          });
          jQuery('#hide_2_3').click(function() {
             jQuery('#rwd24').css('display', 'block');
              jQuery('#hide_23').css('display', 'none');
              jQuery('#hide_24').css('display', 'block');
          });
          jQuery('#hide_2_4').click(function() {
             jQuery('#rwd25').css('display', 'block');
              jQuery('#hide_24').css('display', 'none');
          });
  
      }); 
  </code></pre>