Untitled

<html>  
      <head>  
           <title>Dynamically Add or Remove input fields in PHP with JQuery</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <br />  
                <h2 align="center">Dynamically Add or Remove input fields in PHP with JQuery</h2>  
                <div class="form-group">  
                     <form name="add_name" id="add_name">  
                          <div class="table-responsive">  
                               <table class="table table-bordered" id="dynamic_field">  
                                    <tr>  
                                        <th>No.</th>
                                        <th>Enter Item Name</th>  
                                        <th>Enter Price</th>
                                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                                    </tr>  
                               </table>  
                               <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                          </div>  
                     </form>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      var i=0;  

      generateIndex = () => {
        lenghtRows = $('#dynamic_field tr').length;
        return lenghtRows;
      }

      UpdateIndex = () => {
        lenghtRows = $('#dynamic_field tr').length-1;
        for (i = 0; i< lenghtRows; i++){
            $('#dynamic_field tr td.cont-item')[i].textContent =  i+1;
        }
        
        
      }

      
      $('#add').click(function(){  
           i = generateIndex();
           $('#dynamic_field').append('<tr id="row'+i+'"><td class="cont-item">'+i+'</td><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" name="harga[]" placeholder="price" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>'); 
            
      });  
      $(document).on('click', '.btn_remove', function(){ 
        
           i-=1; 
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
           UpdateIndex();
      });  
      $('#submit').click(function(){            
           $.ajax({  
                url:"name.php",  
                method:"POST",  
                data:$('#add_name').serialize(),  
                success:function(data)  
                {  
                     alert(data);  
                     $('#add_name')[0].reset();  
                }  
           });  
      }); 

          
 });  
 </script>
Editor is loading...