title: How to use append and remove for changing html forms?
body: <p>I am working on this project on Wordpress and I need to use append and remove for dynamically changing forms in html. I tried using that, but there is some errors. It's not working the way it's supposed to be. This is brief description of the code:</p>
  
  <pre><code>&lt;?php 
  /* Template Name: FirstStarRatingSystem */      
  ?&gt;
  
  &lt;div class="t1"&gt;
  &lt;button class="add_form_field"&gt;Add New Field &amp;nbsp; &lt;span style="font-
  size:16px; font-weight:bold;"&gt;+ &lt;/span&gt;&lt;/button&gt;&lt;br&gt;    
  &lt;input type="text" class="t1" name="fname1" id="text1" placeholder="First 
  Rating"&gt;&lt;/div&gt;
  &lt;div class="rating1"&gt; 
  &lt;legend&gt;Please rate:&lt;/legend&gt;
  &lt;input type="radio" class="rating1" id="star5" name="rating1" value="5" /&gt;
  &lt;label for="star5" title="Rocks!"&gt;5 stars&lt;/label&gt;
  &lt;input type="radio" class="rating1" id="star4" name="rating1" value="4" /&gt;
  &lt;label for="star4" title="Pretty good"&gt;4 stars&lt;/label&gt;
  &lt;input type="radio" class="rating1" id="star3" name="rating1" value="3" /&gt;
  &lt;label for="star3" title="Meh"&gt;3 stars&lt;/label&gt;
  &lt;input type="radio" class="rating1" id="star2" name="rating1" value="2" /&gt;
  &lt;label for="star2" title="Kinda bad"&gt;2 stars&lt;/label&gt;
  &lt;input type="radio" class="rating1" id="star1" name="rating1" value="1" /&gt;
  &lt;label for="star1" title="Sucks big time"&gt;1 star&lt;/label&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;div class="t2"&gt;&lt;/div&gt;
  &lt;div class="rating2"&gt;&lt;/div&gt;
  
  &lt;script src="//code.jquery.com/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  $(document).ready(function() {
  var max_fields=2;
  var t2=$(".t2");
  var rating2=$(".rating2");
  var add_button=$(".add_form_field");
  
  var x=1;
  $(add_button).click(function(e){
  e.preventDefault();
  if(x &lt; max_fields){
  x++;
  if(x==2)
  
  $(t2).append('&lt;div class="t2"&gt;&lt;input type="text" class="t2" name="fname2" 
  id="text2" placeholder="Second Rating"&gt;&lt;/div&gt;'); //add input box 
  
  $(rating2).append('&lt;div class="rating2"&gt;&lt;legend&gt;Please rate1:&lt;/legend&gt; 
  &lt;input type="radio" class="rating2" id="1star5" name="rating2" value="5" /&gt; 
  &lt;label for="1star5" title="Rocks!"&gt;5 stars&lt;/label&gt; &lt;input type="radio" 
  class="rating2" id="1star4" name="rating2" value="4" /&gt; &lt;label for="1star4" 
  title="Pretty good"&gt;4 stars&lt;/label&gt; &lt;input type="radio" class="rating2" 
  id="1star3" name="rating2" value="3" /&gt; &lt;label for="1star3" title="Meh"&gt;3 
  stars&lt;/label&gt; &lt;input type="radio" class="rating2" id="1star2" name="rating2" 
  value="2" /&gt; &lt;label for="1star2" title="Kinda bad"&gt;2 stars&lt;/label&gt; &lt;input 
  type="radio" class="rating2" id="1star1" name="rating2" value="1" /&gt; &lt;label 
  for="1star1" title="Sucks big time"&gt;1 star&lt;/label&gt;&lt;a href="#" 
  class="delete"&gt;Delete&lt;/a&gt;&lt;/div&gt;'); //add 5 star rating.
  }
   else
   {
    alert('You Reached the limits')
   }
   });
  
    $(rating2).on("click",".delete", function(e){
      e.preventDefault(); 
      $(t2).remove();
      $(this).parent('div').remove();
  
       x--;
     })
    });
  
    &lt;/script&gt;
  
    &lt;style&gt;NECESSARY CSS&lt;/style&gt;
  </code></pre>
  
  <p>As you would have figured out, that this code is for displaying a dynamic input form along with a 5 star rating system. The user can select number of input form and 5 star rating required. Currently, for testing purposes this number is limited to 2 number of times only(var max_fields = 2;). I need to add both input form and 5 star rating at the same time user presses add button and also remove a input form and 5 star rating at the same time when user presses delete button, but currently this is not working properly and causes second added input form to be deleted permanently and only 5 star rating is working properly ie. getting added and deleted properly.</p>
  
  <p>Thanking in advance.</p>
  
  <p><br>
  First image shows first output before adding second input form and 5 star rating:</p>
  
  <p><a href="https://i.stack.imgur.com/BqmaT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BqmaT.png" alt="enter image description here"></a>
  <br></p>
  
  <p>Second image shows after pressing "Add New Field +" Button after deletion of second input form and 5 star rating:</p>
  
  <p><a href="https://i.stack.imgur.com/FeSi7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FeSi7.png" alt="enter image description here"></a></p>