How can I dynamically add input fields to a form?

Question

I\'m not much of a web programmer, but I\'m creating a simple web app that has a form where the user can enter a series of points (x,y,z) but I don\'t know how many the user

Answer 1

1: HTML :

  

   Example Details
    

        

            
                Education
                Class 10
                Class 12
                Diploma
                PG Diploma
                Bachelors Degree
                Masters Degree
                Other Certifications
               

                        
        
        
        
            xx
            xx
            xx
            xx
        
        
        

        
+Add More
     
   
   

2: PHP

    if(isset($_POST['submit']))
    {

            $xx= json_encode($_POST["xx"]);
            $xx= json_encode($_POST["xx"]);
            $xx= json_encode($_POST["xx"]);
            $xx= json_encode($_POST["xx"]);
            $xx= json_encode($_POST["xx"]);
            $xx= json_encode($_POST["xx"]);

     $query=mysql_query("INSERT INTO `xxx` (`xx`, `xxx`, `xxx`) VALUES ('NULL', '$xx','$xx','$xx')");
    }

3: JS

    var data_fo = $('.add-field').html();
    var sd = '
Remove
';
    var data_combine = data_fo.concat(sd);
    var max_fields = 5; //maximum input boxes allowed
    var wrapper = $(".user"); //Fields wrapper
    var add_button = $(".add-more"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
      e.preventDefault();
      if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append(data_combine); //add input box
        //$(wrapper).append('
Remove
')
      }
      // console.log(data_fo);
    });

    $(wrapper).on("click",".remove-add-more", function(e){ //user click on remove text
        e.preventDefault();
        $(this).prev('.user').remove();
        $(this).remove();
        x--;
    })