alignment is not proper when i add div dynamically using jquery

Question

Hi am implementing add more functionality on my web page when dynamically adding form fields going fine but it is not added row-wise properly form fields going here there how to do alignment of form fields row-wise here and I have move + button right end, do any suggestion if I am wrong anywhere in the code

 $('#clone_button').click(function() {
  $('#clone_wrapper')
  .clone()
  .append('clone')
  .appendTo($('#clone_wrapper'));
});



    
     
  
 
      
        
          
          
        
      
    
    
      
	  
	   
        
          
		  <Let's Add User
             
			  
						   
					 
					 
			         
              
			  
			  
               
				   
                        Role
                        
                          
                        
                      
				 
				
				
                 
                  
                   
                    First Name
                     
                
				
				
				
				
                  
                   
                    Last Name
                     
                
				 
				
				
                  
                   
                    Email
                     
                
				
				
				
				
				   
                        Profile


      
        
          
          
        
      
    
    
      

       
        
          
          <Let's Add User
             
              
                           
                     
                     
                     
              
              
              

                   
                        Role
                        
                          
                        
                      
                 

                
                 
                  

                    First Name
                     
                
                

                
                
                  

                    Last Name
                     
                
                 
                
                
                  

                    Email
                     
                
                

                

                   
                        Profile

Jyothi Babu Araja · Accepted Answer

You need to add new form on every button click, but you are cloning entire newly formed element (form).

See the updated code where every newly created form-group added to fieldset. And applied class row for every new form-group so that it's available in new line.

var clones = 1;
$('#clone_button').click(function() {
  $('#clone_wrapper')
    .clone()
    .append('clone').attr('id', '#clone_wrapper' + clones++)
    .appendTo($('.form-set'));
});

.form-set #clone_wrapper{
  display: block;
}







  
    
      
      
    
  


  

    
      
        
          <Let's Add User
            
              
                
              
            
            
              
                
                  

                    
                      Role
                      
                        
                      
                    
                  

                  
                    
                      

                        First Name
                         
                    
                  

                  
                    
                      

                        Last Name
                         
                    
                  
                  
                    
                      

                        Email
                         
                    
                  

                  

                    
                      Profile

alignment is not proper when i add div dynamically using jquery

Answers (1)

Related Questions