+ Start a Discussion
empemp 

Add Row functionality in VisualForce

Hi

 

I have a VF page where in I am using case standard controller.

The first time when the page is displayed 2 input fields (eg.) are there i.e. Name and Email. which are static. Another 2 fields are their like Vendor Name and Vendor Contact No. which are dynamic.

 

Now, I want to implement the functionality wherein if a user clicks on Add Row button,  1more row will appear to enter a value in both  the fields(Vendor name and Vendor Contact No.). So, if he clicks the button 5 times, 5 rows shud appear with thses two columns.

After providing the inputs, he will click on "Save " button, and the record should be saved wherein the inputs provided in multiple rows should be saved into the related list of the Case detail page (Case details page will contain the information like Name and Email). Request you to please forward me the code for the above mentioned functionality. Since its a n urgent requirement. An early reply will be highly appreciated. Thanks.

Best Answer chosen by Admin (Salesforce Developers) 
Shailesh DeshpandeShailesh Deshpande

i had done something similar earlier...following is the code snipplet...i did it for accounts...following is the code snipplet...

VF Page :

 

 

<apex:page StandardController="Account" extensions="MultiAdd" id="thePage">
<apex:form >
<apex:pageblock id="pb" >
	<apex:pageBlockButtons >
		<apex:commandbutton value="Add" action="{!Add}" rerender="pb1"/>
		<apex:commandbutton value="Save" action="{!Save}"/>
	</apex:pageBlockButtons>
	
		
		<apex:pageblock id="pb1">
			
		<apex:repeat value="{!lstInner}" var="e1" id="therepeat">
				<apex:panelGrid columns="5">
				
				<apex:panelGrid headerClass="Name">
					<apex:facet name="header">Del</apex:facet>
					<apex:commandButton value="X" action="{!Del}" rerender="pb1">
						<apex:param name="rowToBeDeleted" value="{!e1.recCount}" assignTo="{!selectedRowIndex}"></apex:param>
					</apex:commandButton>
				</apex:panelGrid>	
				
				<apex:panelGrid title="SPD" >
					<apex:facet name="header">Country</apex:facet>
					<apex:inputfield value="{!e1.acct.ShippingCountry}"/>
				</apex:panelGrid>
				
				<apex:panelGrid >
					<apex:facet name="header">IsActive</apex:facet>
					<apex:inputfield value="{!e1.acct.Active__c}"/>
				</apex:panelGrid>
				
				<apex:panelGrid >
					<apex:facet name="header">Name</apex:facet>
					<apex:inputfield value="{!e1.acct.Name}"/>
				</apex:panelGrid>
			</apex:panelgrid>
		</apex:repeat>
	</apex:pageBlock>
		
</apex:pageblock>
</apex:form>
</apex:page>

 

 

Apex Controller :

 

 

public class MultiAdd
{
	
	//will hold the account records to be saved
	public List<Account>lstAcct  = new List<Account>();
	
	//list of the inner class
	public List<innerClass> lstInner 
	{	get;set;	}
	
	//will indicate the row to be deleted
	public String selectedRowIndex
	{get;set;}	
	
	//no. of rows added/records in the inner class list
	public Integer count = 1;
	//{get;set;}
	
	
	////save the records by adding the elements in the inner class list to lstAcct,return to the same page
	public PageReference Save()
	{
		PageReference pr = new PageReference('/apex/MultiAdd');
		
		for(Integer j = 0;j<lstInner.size();j++)
		{
			lstAcct.add(lstInner[j].acct);
		} 
		insert lstAcct;
		pr.setRedirect(True);
		return pr;
	}
		
	//add one more row
	public void Add()
	{	
		count = count+1;
		addMore();		
	}
	
	/*Begin addMore*/
	public void addMore()
	{
		//call to the iner class constructor
		innerClass objInnerClass = new innerClass(count);
		
		//add the record to the inner class list
        lstInner.add(objInnerClass);    
        system.debug('lstInner---->'+lstInner);            
    }/* end addMore*/
	
	/* begin delete */
	public void Del()
	{
		system.debug('selected row index---->'+selectedRowIndex);
		lstInner.remove(Integer.valueOf(selectedRowIndex)-1);
		count = count - 1;
		
	}/*End del*/
	
	
	
	/*Constructor*/
	public MultiAdd(ApexPages.StandardController ctlr)
	{
	
        lstInner = new List<innerClass>();
        addMore();
        selectedRowIndex = '0';
        
	}/*End Constructor*/
		


	/*Inner Class*/
	public class innerClass
	{		
		/*recCount acts as a index for a row. This will be helpful to identify the row to be deleted */
		public String recCount
		{get;set;}
		
		
		public Account acct 
		{get;set;}
		
		/*Inner Class Constructor*/
		public innerClass(Integer intCount)
		{
			recCount = String.valueOf(intCount);		
			
			/*create a new account*/
			acct = new Account();
			
		}/*End Inner class Constructor*/	
	}/*End inner Class*/
}/*End Class*/

 

I hope this helps...

 

 

All Answers

Shailesh DeshpandeShailesh Deshpande

i had done something similar earlier...following is the code snipplet...i did it for accounts...following is the code snipplet...

VF Page :

 

 

<apex:page StandardController="Account" extensions="MultiAdd" id="thePage">
<apex:form >
<apex:pageblock id="pb" >
	<apex:pageBlockButtons >
		<apex:commandbutton value="Add" action="{!Add}" rerender="pb1"/>
		<apex:commandbutton value="Save" action="{!Save}"/>
	</apex:pageBlockButtons>
	
		
		<apex:pageblock id="pb1">
			
		<apex:repeat value="{!lstInner}" var="e1" id="therepeat">
				<apex:panelGrid columns="5">
				
				<apex:panelGrid headerClass="Name">
					<apex:facet name="header">Del</apex:facet>
					<apex:commandButton value="X" action="{!Del}" rerender="pb1">
						<apex:param name="rowToBeDeleted" value="{!e1.recCount}" assignTo="{!selectedRowIndex}"></apex:param>
					</apex:commandButton>
				</apex:panelGrid>	
				
				<apex:panelGrid title="SPD" >
					<apex:facet name="header">Country</apex:facet>
					<apex:inputfield value="{!e1.acct.ShippingCountry}"/>
				</apex:panelGrid>
				
				<apex:panelGrid >
					<apex:facet name="header">IsActive</apex:facet>
					<apex:inputfield value="{!e1.acct.Active__c}"/>
				</apex:panelGrid>
				
				<apex:panelGrid >
					<apex:facet name="header">Name</apex:facet>
					<apex:inputfield value="{!e1.acct.Name}"/>
				</apex:panelGrid>
			</apex:panelgrid>
		</apex:repeat>
	</apex:pageBlock>
		
</apex:pageblock>
</apex:form>
</apex:page>

 

 

Apex Controller :

 

 

public class MultiAdd
{
	
	//will hold the account records to be saved
	public List<Account>lstAcct  = new List<Account>();
	
	//list of the inner class
	public List<innerClass> lstInner 
	{	get;set;	}
	
	//will indicate the row to be deleted
	public String selectedRowIndex
	{get;set;}	
	
	//no. of rows added/records in the inner class list
	public Integer count = 1;
	//{get;set;}
	
	
	////save the records by adding the elements in the inner class list to lstAcct,return to the same page
	public PageReference Save()
	{
		PageReference pr = new PageReference('/apex/MultiAdd');
		
		for(Integer j = 0;j<lstInner.size();j++)
		{
			lstAcct.add(lstInner[j].acct);
		} 
		insert lstAcct;
		pr.setRedirect(True);
		return pr;
	}
		
	//add one more row
	public void Add()
	{	
		count = count+1;
		addMore();		
	}
	
	/*Begin addMore*/
	public void addMore()
	{
		//call to the iner class constructor
		innerClass objInnerClass = new innerClass(count);
		
		//add the record to the inner class list
        lstInner.add(objInnerClass);    
        system.debug('lstInner---->'+lstInner);            
    }/* end addMore*/
	
	/* begin delete */
	public void Del()
	{
		system.debug('selected row index---->'+selectedRowIndex);
		lstInner.remove(Integer.valueOf(selectedRowIndex)-1);
		count = count - 1;
		
	}/*End del*/
	
	
	
	/*Constructor*/
	public MultiAdd(ApexPages.StandardController ctlr)
	{
	
        lstInner = new List<innerClass>();
        addMore();
        selectedRowIndex = '0';
        
	}/*End Constructor*/
		


	/*Inner Class*/
	public class innerClass
	{		
		/*recCount acts as a index for a row. This will be helpful to identify the row to be deleted */
		public String recCount
		{get;set;}
		
		
		public Account acct 
		{get;set;}
		
		/*Inner Class Constructor*/
		public innerClass(Integer intCount)
		{
			recCount = String.valueOf(intCount);		
			
			/*create a new account*/
			acct = new Account();
			
		}/*End Inner class Constructor*/	
	}/*End inner Class*/
}/*End Class*/

 

I hope this helps...

 

 

This was selected as the best answer
empemp

Hi

 

Thanks for the prompt reply. It helped me a lot.

 

But in contuation with this issue, While adding rows on the VF Page, attachment should also be included in that row. So, whenever user clicks on "Add Row " Button, he should be able to view all the input fields along with the field used for attachment.

 

I have implemented this, the problem here is after providing input in all the fields + attachment field, when the user clicks on Add Row Button, the value in all the fields persist except Attachment field. Even rerender cannot be used for inputfile.

 

Please let me know any work around for the same.

Thanks.

JPlayEHRJPlayEHR

This is awesome.  I tweaked the code a bit though so that the rows could all be removed out of order.  There was an issue where if you added more than 1 row and then deleted them out of order, it would throw an error.  

 

I also tweaked it so that the existing records on a related list would already be in the list when the page loads...and clicking the add button adds a row to the bottom of the related list. Also, the user can click an "edit" button next to each line that puts the existing records in the related list into edit mode.

 

Your base code sample was a lifesaver - let me know if you're interested in seeing how I tweaked it (I'd post it now, but I'm still cleaning up my mess).

Shailesh DeshpandeShailesh Deshpande

I am Glad that it helped you. Please do send me the modified code at spd101287@gmail.com if you have finished up the housekeeping :)

 

Thanks,

Shailesh.

DRobi83DRobi83

would you mind posting the modified code here?

 

I did some extensions on your code also, but i am having some errors, example i cannot remove the new line item as the fields are required.

 

vf page

 

<apex:page StandardController="Invoice__c" extensions="MultiAdd" id="thePage">
<apex:form >
<apex:pageblock id="pb" >
    <apex:pageBlockButtons >
        <apex:commandbutton value="Add Line Item" action="{!Add}" rerender="pb1"/>
        <apex:commandbutton value="Save Invoice" action="{!Save}"/>
    </apex:pageBlockButtons>
    
    <apex:pageBlockSection title="Information" columns="2" collapsible="false">
        <apex:inputField value="{!Invoice__c.Customer__c}" required="true" />
        <apex:inputField value="{!Invoice__c.Currency__c}" required="true" />
        <apex:inputField value="{!Invoice__c.Date_Document__c}" required="true" />
        <apex:inputField value="{!Invoice__c.Type__c}" required="true" />
        <apex:inputField value="{!Invoice__c.Due_Date__c}" required="true" />    
    </apex:pageBlockSection>    
        
        
        <apex:pageblock id="pb1">
            
        <apex:repeat value="{!lstInner}" var="e1" id="therepeat">
                <apex:panelGrid columns="8">
                
                <apex:panelGrid headerClass="Name">
                    <apex:facet name="header">Delete</apex:facet>
                    <apex:commandButton value="Remove" action="{!Del}" rerender="pb1">
                        <apex:param name="rowToBeDeleted" value="{!e1.recCount}" assignTo="{!selectedRowIndex}"></apex:param>
                    </apex:commandButton>
                </apex:panelGrid>   
                
                <apex:panelGrid title="SPD" >
                    <apex:facet name="header">Display Name</apex:facet>
                    <apex:inputfield value="{!e1.acct.Display_Name__c}" required="true"/>
                </apex:panelGrid>
                
                <apex:panelGrid >
                    <apex:facet name="header">Product</apex:facet>
                    <apex:inputfield value="{!e1.acct.Product_For_Sale__c}" required="true"/>
                </apex:panelGrid>
                
                <apex:panelGrid >
                    <apex:facet name="header">Currency</apex:facet>
                    <apex:inputfield value="{!e1.acct.Currency__c}" required="true"/>
                </apex:panelGrid>
                
                <apex:panelGrid >
                    <apex:facet name="header">Tax Type</apex:facet>
                    <apex:inputfield value="{!e1.acct.Tax__c}" required="true"/>
                </apex:panelGrid>

                <apex:panelGrid >
                    <apex:facet name="header">Quantity</apex:facet>
                    <apex:inputfield value="{!e1.acct.Amount_Inc_Tax__c}" required="true" />
                </apex:panelGrid>
                
                <apex:panelGrid >
                    <apex:facet name="header">Invoice</apex:facet>
                    <apex:inputfield value="{!e1.acct.Invoice__c}" required="true" />
                </apex:panelGrid>

                <apex:panelGrid >
                    <apex:facet name="header">Amount</apex:facet>
                    <apex:inputfield value="{!e1.acct.Amount_Inc_Tax__c}" required="true" />
                </apex:panelGrid>                              
                
            </apex:panelgrid>
        </apex:repeat>
    </apex:pageBlock>
</apex:pageblock>
</apex:form>
</apex:page>

 

extension

 

public class MultiAdd
{
    
    //will hold the account records to be saved
    public List<miiFinance__Invoice_Line_Item__c>lstAcct  = new List<miiFinance__Invoice_Line_Item__c>();
    
    //list of the inner class
    public List<innerClass> lstInner 
    {   get;set;    }
    
    //will indicate the row to be deleted
    public String selectedRowIndex
    {get;set;}  
    
    //no. of rows added/records in the inner class list
    public Integer count = 1;
    //{get;set;}
    
    
    ////save the records by adding the elements in the inner class list to lstAcct,return to the same page
    public PageReference Save()
    {
        PageReference pr = new PageReference('/apex/MultiAdd');
        
        for(Integer j = 0;j<lstInner.size();j++)
        {
            lstAcct.add(lstInner[j].acct);
        } 
        insert lstAcct;
        pr.setRedirect(True);
        return pr;
    }
        
    //add one more row
    public void Add()
    {   
        count = count+1;
        addMore();      
    }
    
    /*Begin addMore*/
    public void addMore()
    {
        //call to the iner class constructor
        innerClass objInnerClass = new innerClass(count);
        
        //add the record to the inner class list
        lstInner.add(objInnerClass);    
        system.debug('lstInner---->'+lstInner);            
    }/* end addMore*/
    
    /* begin delete */
    public void Del()
    {
        system.debug('selected row index---->'+selectedRowIndex);
        lstInner.remove(Integer.valueOf(selectedRowIndex)-1);
        count = count - 1;
        
    }/*End del*/
    
    
    
    /*Constructor*/
    public MultiAdd(ApexPages.StandardController ctlr)
    {
    
        lstInner = new List<innerClass>();
        addMore();
        selectedRowIndex = '0';
        
    }/*End Constructor*/
        


    /*Inner Class*/
    public class innerClass
    {       
        /*recCount acts as a index for a row. This will be helpful to identify the row to be deleted */
        public String recCount
        {get;set;}
        
        
        public miiFinance__Invoice_Line_Item__c acct 
        {get;set;}
        
        /*Inner Class Constructor*/
        public innerClass(Integer intCount)
        {
            recCount = String.valueOf(intCount);        
            
            /*create a new account*/
            acct = new miiFinance__Invoice_Line_Item__c();
            
        }/*End Inner class Constructor*/    
    }/*End inner Class*/
}/*End Class*/

 

JPlayEHRJPlayEHR

Here's the page/Class... apologies for the formatting getting a little messed up in the class...something got misaligned in the translation between eclipse and the browser.  Also, there might be missing methods here and there because I took it out of a class that was too big to post...a lot of jQuery references and things in general that weren't applicable/necessary...but the important parts of it should be there...

 

Apex Page:

<apex:page standardcontroller="E_Referral__c" extensions="EReferralController">
<apex:form > 
	<apex:PageBlock >                   
		<apex:message style="color:red;font-weight:bold" ></apex:message><apex:messages style="color:red;font-weight:bold"></apex:messages>
		<apex:outputPanel id="theSLRrepeat">
			<apex:pageBlockTable value="{!SLRRW}" var="rw" rendered="{!SLRRW.size>0}" >
			      
			<apex:column style="width:85px" headerValue="Action">                                           
				<apex:commandButton value="Edit" action="{!editOneSLRRW}" rerender="theSLRrepeat" rendered="{!NOT(rw.isInEdit)}">
					<apex:param name="rowToBeEdited" value="{!rw.recCount}" assignTo="{!selectedRowIndex}"></apex:param>
				</apex:commandButton>
			
				<apex:commandButton value="Save" action="{!saveOneSLRRW}" rerender="theSLRrepeat" rendered="{!rw.isInEdit}">
					<apex:param name="rowToBeSaved" value="{!rw.recCount}" assignTo="{!selectedRowIndex}"></apex:param>                             
				</apex:commandButton>
				
				<apex:commandButton value="Cancel" action="{!cancelOneSLRRW}" rerender="theSLRrepeat" rendered="{!rw.isInEdit}">
					<apex:param name="rowToBeCanceled" value="{!rw.recCount}" assignTo="{!selectedRowIndex}"></apex:param>                              
				</apex:commandButton>
			
				<small><apex:outputText style="color:red;font-weight:bold" value="Please remember to Save" rendered="{!rw.isInEdit}"/></small>                                          
			</apex:column>  
			
			<apex:column headerValue="Group" >
				<apex:outputfield value="{!rw.rWork.Group__c}" rendered="{!NOT(rw.isInEdit)}"/>
				<apex:inputfield value="{!rw.rWork.Group__c}" rendered="{!rw.isInEdit}"/>
			</apex:column>
			                                                              
			<apex:column headerValue="Delete" rendered="{!CurrentUser=='System Administrator'}">
				<apex:actionFunction action="{!DelOneSLRRW}"  name="deleteIt">
					<apex:param name="rowToBeDeleted" value="{!rw.recCount}" assignTo="{!selectedRowIndex}"></apex:param>
				</apex:actionFunction> 
				<apex:commandButton value="X"  rerender="theSLRrepeat" rendered="{!rw.isInEdit&&rw.rWork.Id!=null}"  onclick="if(confirm('Are you sure you want to delete this rework?'))deleteIt();">
					<apex:param name="rowToBeDeleted" value="{!rw.recCount}" assignTo="{!selectedRowIndex}"></apex:param>
				</apex:commandButton>
			</apex:column>                                                          
			    
			</apex:pageBlockTable>      
			
			<small><i><apex:outputText value="No Related SLR Reworks Exist" rendered="{!SLRRW.size==0}"/></i></small>
			
			<table width="100%"><tr><td align="right">
				<apex:commandbutton value="Add Rework" action="{!AddOneSLRRW}" rerender="theSLRrepeat" style="height:15px;padding:0"/>
			</td></tr></table> 
		</apex:outputPanel>   
	</apex:PageBlock>
</apex:form>
</apex:page>

 Class:

//This will query/store the currently used E Referral Record
	public E_Referral__c E = new E_Referral__c();
    public E_Referral__c getE(){ if(E.Id==null&&thisE.Id!=null){ E = queryE(thisE.Id); } return E; }
    
    //This method will be used/reused to query E Referral records
    public E_Referral__c queryE(string thisId)	{  return [select Id from E_Referral__c where Id=:thisId]; }   

//SLRRW===================================================================	
	public Integer countSLRRW = 0;
	public List<innerClass> SLRRW = new List<innerClass>();
	public List<innerClass> getSLRRW(){
		if(countSLRRW==0){
			for(E_Referral_Rework__c thisRW: [select Id, Name, RecordType.Name, Status_Comments__c, Rework_Overview__c,  
				Status__c, Group__c, Transition_Date__c, Rework_Stage__c, E_Referral__c,				 
				CCA_Technical_Rework__c, CCA_Clinical_Rework__c, Scheduled_Go_Live_date__c,
				Confirmed_Scheduled_Go_Live__c  
				from E_Referral_Rework__c 
				where E_Referral__c=:getE().Id 
				and RecordType.Name=:'SLR' order by createdDate asc]){
				SLRRW.add(new innerClass(countSLRRW, thisRW, false));
				countSLRRW++;
			}
		}
		return SLRRW;
	}
		
	/*Begin addMore*/
	public void addOneSLRRW(){
		try{/*call to the iner class constructor*/innerClass objInnerClass = new innerClass(countSLRRW, new E_Referral_Rework__c(RecordTypeId = reworkRTs.get('SLR'),E_Referral__c = thisE.Id), true);/*add the record to the inner class list*/SLRRW.add(objInnerClass);countSLRRW++;}catch(Exception Ex){ ApexPages.addMessages(Ex); }
    }
	
	/* begin delete */
	public void DelOneSLRRW(){
		try{innerClass thisInnerClass = SLRRW[Integer.valueOf(selectedRowIndex)];E_Referral_Rework__c thisERefRWk = thisInnerClass.rWork;SLRRW.remove(Integer.valueOf(selectedRowIndex));if(thisERefRWk.Id!=null)delete thisERefRWk;countSLRRW=0;for(innerClass n: SLRRW){ Integer thisInt = countSLRRW; n.recCount = thisInt.format(); countSLRRW++; }}catch(Exception Ex){ ApexPages.addMessages(Ex); }
	}
		
	public void saveOneSLRRW(){		
		try{innerClass thisInnerClass = SLRRW[Integer.valueOf(selectedRowIndex)];E_Referral_Rework__c thisERefRWk = thisInnerClass.rWork;upsert thisERefRWk;thisInnerClass.isInEdit=false;countSLRRW=0;for(innerClass n: SLRRW){ Integer thisInt = countSLRRW; n.recCount = thisInt.format(); countSLRRW++; }}catch(Exception Ex){ ApexPages.addMessages(Ex); }
	}
	
	public void editOneSLRRW(){ 
		innerClass thisInnerClass = SLRRW[Integer.valueOf(selectedRowIndex)]; 
		thisInnerClass.isInEdit = true; 
	}
	public void cancelOneSLRRW(){ 
		try{innerClass thisInnerClass = SLRRW[Integer.valueOf(selectedRowIndex)];thisInnerClass.isInEdit = false;if(thisInnerClass.rWork.Id==null)SLRRW.remove(Integer.valueOf(selectedRowIndex));else SLRRW[Integer.valueOf(selectedRowIndex)].rWork = queryOneE(SLRRW[Integer.valueOf(selectedRowIndex)].rWork.Id);countSLRRW=0;for(innerClass n: SLRRW){ Integer thisInt = countSLRRW; n.recCount = thisInt.format(); countSLRRW++; }}catch(Exception Ex){ ApexPages.addMessages(Ex); }
	}

 


SaneSane

Hi,

 

I am new to this kindly let me know how can I add pagination to this code. I have a similar requirement where I need to display 4 records to be added on single page.

 

Please suggest.

 

Thanks in advance.

 

Regards,

Sane

Ronaldo CostaRonaldo Costa
@JPlayEHR @Shailesh Deshpande would you mind to email me the full class and vf page? ronaldo.rjvc@gmail.com thanks I have a very simillar need.
Anurag Shah 7Anurag Shah 7

@JPlayEHR @Shailesh Deshpande would you mind to email me the full class and vf page? anurag.shah@hotmail.com thanks I have a very simillar need and I am new in SalesForce
Anurag Shah 7Anurag Shah 7
@MarcioZima also if you have code whith you then please email me the full class and vf page? anurag.shah@hotmail.com 
Ivan WinzerIvan Winzer
@JPlayEHR, i know its been a minute since you posted the code but was wondering if you could email me the entire class iwinzer@hallwines.com

I copied what is shown above but getting a Compilation error: Invalid type: Innerclass at line 10 in your code above. Any thought as to why?
Shobhit TShobhit T
Could you please tell me , what could be replaced with this inner class to make this code work ??
Shobhit TShobhit T
HI @ JPlayEHR could you please send your code at sho_bhit@yahoo.co.in.
I have a similar need.
Thanks in advance. :)
sfdcvirajsfdcviraj
++ Shailesh 

What I'm looking for something similar. For the same I have posted a question here - https://goo.gl/62qGiR

I appreciate your help. 

Thank you. 
Jessie Rymph 3Jessie Rymph 3
This is really helpful! I also have a question - how to get the id of the parent object (quote) to populate on each new child record (custom object). Question here. https://t.co/YbBcqrDXoE
Sohan RajSohan Raj
Hello,

You can use below code for add dynamic multiple rows:

VF Page:
 
<apex:page controller="AddMultipleAccount">
<apex:form id="theForm">
 <apex:pageblock id="thePB" title="Creating Multiple Accounts">
  <apex:pageblockButtons >
   <apex:commandButton value="Save" action="{!SaveMultipleAccounts}"/>
  
  </apex:pageblockButtons>

  <apex:outputPanel id="accountHead">
  <apex:variable value="{!0}" var="rowNum"/>  
   <apex:pageBlockSection columns="1" title="Adding Multiple Accounts" id="thePbs" collapsible="False"> 
   
     <apex:pageBlockTable value="{!accountList}" var="eachRecord"> 
      
      <apex:column headerValue="Action">
        <apex:commandLink value="Remove" style="color:red" action="{!removeRowFromAccList}" rendered="{!rowNum > 0}" rerender="accountHead" immediate="true" >
             <apex:param value="{!rowNum}" name="rowToRemove" assignTo="{!rowToRemove}"/>
         </apex:commandLink>
         <apex:variable var="rowNum" value="{!rowNum + 1}"/>
      </apex:column>
      
      <apex:column headerValue="Account Name">
                            <apex:inputField value="{!eachRecord.record.Name}" required="true"/>
       </apex:column>
      
      <apex:column headerValue="Account Number">
                            <apex:inputField value="{!eachRecord.record.AccountNumber}" required="true"/>
       </apex:column>
       
       
       <apex:column headerValue="Account Type">
                                <apex:inputfield value="{!eachRecord.record.Type}" required="true"/>
        </apex:column>
      
      
    </apex:pageBlockTable>
   </apex:pageBlockSection>
   <apex:commandButton value="Add More" action="{!addNewRowToAccList}" rerender="accountHead" Status="status" immediate="true" />
   
  </apex:outputPanel>

 </apex:pageblock>
</apex:form>
  
</apex:page>

Apex Controller:
 
public with sharing class AddMultipleAccount {

    public PageReference SaveMultipleAccounts() {
		system.debug('==accountList==>'+accountList.size());
		List<Account> insertedAccountRecords = new List<Account>();
		if(accountList !=null && !accountList.isEmpty()){
		    for(InnerClassAccountList eachRecord : accountList ){
		        Account accTemp = eachRecord.record;
		        insertedAccountRecords.add(accTemp);
		       
		    }
		    system.debug('==insertedAccountRecords==>'+insertedAccountRecords.size());
		    insert insertedAccountRecords;
		}


	    return null;
    }


 public List<InnerClassAccountList> accountList {get;set;}
 public Integer rowToRemove {get;set;}

 public AddMultipleAccount(){
  accountList = new List<InnerClassAccountList>();
  addNewRowToAccList();
 }
 public void removeRowFromAccList(){
  accountList.remove(rowToRemove);
 }

 public void addNewRowToAccList(){
    InnerClassAccountList newRecord = new InnerClassAccountList();
    Account newAccountRecord = new Account();        
    newRecord.record = newAccountRecord;
    newRecord.index = accountList.size();
    accountList.add(newRecord);
    }
    
    

 public class InnerClassAccountList{
        public Integer index {get;set;}
        public Account record {get;set;}
   } 
}

I hope this will help you. 
Aam MAam M
Hello All.. By looking into all the code I can say that, For a single Account we can add multiple Contacts in the Related List. So can any one help me over here by sharing the code? or any assistance please to fulfill this :)

Thanks.