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.

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

Second image shows after after pressing “Add New Field +” Button after deletion of second input form and 5 star rating.

Read more here: How to use append and remove for changing html forms?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: