Как добавить одну или несколько форм с помощью кнопки и удалить ее с помощью другой кнопки с помощью JavaScript

Question

Я хочу добавить одну или несколько форм с помощью кнопки и удалить ее с помощью другой кнопки с помощью JavaScript.нажмите один раз, чтобы эта кнопка создала форму, снова нажмите ее, затем она создаст ту же форму одной кнопкой.и я могу вставить их значения в базу данных.

Answer 1

$("#add_button").click(function(){
  var intial_field = $(this).data("intial");
  var content = '<div id="input_'+intial_field+'"><input type="text" name="user_name[]" /><button id="remove_btn" data-remove="'+intial_field+'">X</button></div>';
  $("#recurssion_container").append(content);
  $(this).data("intial",intial_field+1);
});
$(document).on("click","#remove_btn",function(){
  var remove_element = $(this).data("remove");
  $("#input_"+remove_element).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="add_button" data-intial="0">+ Add</button>
<form action="index.php" method="post">
<div id="recurssion_container"></div>
<input type="text" name="user_name[]" />
<button type="submit" name="save">Save</button>
</form>

<?php
if(isset($_POST["save"])){
    $user_name_array = $_POST["user_name"];
    foreach($user_name_array as $user_name){
        if($user_name!=""){
            #Put your insert query here
            #Please refer how to save data to database https://www.w3schools.com/php/php_mysql_insert.asp
        }
    }
}
?>

Answer 2

<script type="text/javascript">

$(document).ready(function(){

    var counter = "2";
		
    $("#addButton").click(function () {
				
	if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
	}   
		
	var newTextBoxDiv = $(document.createElement('div'))
	     .attr("id", 'TextBoxDiv' + counter);
        
	newTextBoxDiv.after().html('<label style="margin-right:5.9%">Nature Of Income '  +  ' : </label>' +'<input type="text" name="NatureIncome' +   
	      '" id="textbox'   + '" value="" ><br>' + '<br><label style="margin-right:10.2%">Total Amount' + ': </label>'+'<input type="text"  name="TotalAmount' +   
	      '" id="textbox'   + '" value="" ><br><hr style="border: 1px solid black;">' );
            
	newTextBoxDiv.appendTo("#TextBoxesGroup");

				
	counter++;
     });

     $("#removeButton").click(function () {
	if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   
        
	counter--;
			
        $("#TextBoxDiv" + counter).remove();
			
     });
		
  });
    </script>