How to use append and remove for changing html forms?

Question

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:

<?php 
/* Template Name: FirstStarRatingSystem */      
?>

<div class="t1">
<button class="add_form_field">Add New Field &nbsp; <span style="font-
size:16px; font-weight:bold;">+ </span></button><br>    
<input type="text" class="t1" name="fname1" id="text1" placeholder="First 
Rating"></div>
<div class="rating1"> 
<legend>Please rate:</legend>
<input type="radio" class="rating1" id="star5" name="rating1" value="5" />
<label for="star5" title="Rocks!">5 stars</label>
<input type="radio" class="rating1" id="star4" name="rating1" value="4" />
<label for="star4" title="Pretty good">4 stars</label>
<input type="radio" class="rating1" id="star3" name="rating1" value="3" />
<label for="star3" title="Meh">3 stars</label>
<input type="radio" class="rating1" id="star2" name="rating1" value="2" />
<label for="star2" title="Kinda bad">2 stars</label>
<input type="radio" class="rating1" id="star1" name="rating1" value="1" />
<label for="star1" title="Sucks big time">1 star</label>
</div>
<br><br>
<br><br>
<br><br>
<div class="t2"></div>
<div class="rating2"></div>

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>

$(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 < max_fields){
x++;
if(x==2)

$(t2).append('<div class="t2"><input type="text" class="t2" name="fname2" 
id="text2" placeholder="Second Rating"></div>'); //add input box 

$(rating2).append('<div class="rating2"><legend>Please rate1:</legend> 
<input type="radio" class="rating2" id="1star5" name="rating2" value="5" /> 
<label for="1star5" title="Rocks!">5 stars</label> <input type="radio" 
class="rating2" id="1star4" name="rating2" value="4" /> <label for="1star4" 
title="Pretty good">4 stars</label> <input type="radio" class="rating2" 
id="1star3" name="rating2" value="3" /> <label for="1star3" title="Meh">3 
stars</label> <input type="radio" class="rating2" id="1star2" name="rating2" 
value="2" /> <label for="1star2" title="Kinda bad">2 stars</label> <input 
type="radio" class="rating2" id="1star1" name="rating2" value="1" /> <label 
for="1star1" title="Sucks big time">1 star</label><a href="#" 
class="delete">Delete</a></div>'); //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--;
   })
  });

  </script>

  <style>NECESSARY CSS</style>

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.

Thanking in advance.

First image shows first output before adding second input form and 5 star rating:

Second image shows after pressing "Add New Field +" Button after deletion of second input form and 5 star rating:

Answer 1

Your issue is actually because your container for your input field having the same class name which is t2, so by the below, you're removing both (container and the input field and the defined t2 element from your HTML).

$(rating2).on("click",".delete", function(e){
  e.preventDefault(); 
  $(t2).remove();
  $(this).parent('div').remove();

  x--;
})

So by the time you're appending, t2container is no longer available from the DOM. So var t2 refer to null value so append will not work.

You should do something like this.

$(rating2).on("click",".delete", function(e){
  e.preventDefault(); 
  $(t2).find('input').remove(); // find the input element and remove
  $(this).parent('div').remove();

  x--;
})

OR change your input field class to something not similar to your container

your declaration

var t2=$(".t2"); 

how you append

$(t2).append('<div class="t2"><input type="text" class="t2" name="fname2" id="text2" placeholder="Second Rating"></div>');

how you remove

$(t2).remove();