Thanks for your replay 

this is my component

i want to create this component n times . When a new person button is  clicked in my page it will open as a new tab.

we can open any number of new person tabs in my main page which will keep different state. 

<apex:component controller="NewPersonTabController" allowDML="true">
<apex:attribute name="index" description="Tab index" type="Integer" required="required" assignTo="{!index}"/>
<div id="newPerson{!index}">
<apex:pageBlock id="newPerson">
<apex:form id="newPersonForm">

<div id="newPersonBlock" >
<apex:pageBlockSection id="myhead">
<h1>person </h1>(New)

</apex:pageBlockSection>

<div class="newpersonTabpanel">
<apex:tabPanel selectedTab="{!tab}" switchType="ajax" value="{!tab}" reRender="newPerson,wizardButtons" id="newpersonTabPanel" styleClass="newPersonTabPanel" >

<apex:tab title="Demographic" label="Details" immediate="false" styleClass="tabs" id="details" status="loadingStatus" oncomplete="selectTabActionFunction('details')">
<div class="demographic fieldValues">
<div class="legalName fieldSet">
<fieldset><legend align="left">Person Name</legend>
<fieldset><legend align="left">Legal Name</legend>
<apex:pageBlockSection columns="1">
<apex:inputField value="{!person.First_Name__c}" />
<apex:inputField value="{!person.Middle_Name__c}"/>
<apex:inputField value="{!person.Last_Name__c}"/>
<apex:inputField value="{!person.Suffix__c}"/>
</apex:pageBlockSection>
</fieldset>
</fieldset>
</div>
<div class="fieldSet gender">
<fieldset><legend align="left">Gender</legend>
<apex:pageBlockSection columns="1">
<apex:inputField value="{!person.Gender__c}"/>
</apex:pageBlockSection>
</fieldset>
</div>
<div class="fieldSet dob">
<fieldset><legend align="left">Date of Birth *</legend>
<apex:pageBlockSection >
<apex:inputField value="{!person.Date_of_Birth__c}"/>
</apex:pageBlockSection>
</fieldset>
</div>
<div class="fieldSet phoneNo">
<fieldset><legend align="left">Telecom</legend>
<apex:pageBlockSection >
<apex:inputField value="{!person.Home_Phone__c}"/>
</apex:pageBlockSection>
</fieldset>
</div>
<div class="fieldSet additional">
<fieldset><legend align="left">Additional Details</legend>
<apex:pageBlockSection >

<apex:selectCheckboxes value="{!race}" label="Race"><apex:message />
<apex:selectOptions value="{!races}"/>
</apex:selectCheckboxes>
<apex:selectRadio value="{!person.Ethnicity__c}">
<apex:selectOptions value="{!ethnicity}"/>
</apex:selectRadio>
</apex:pageBlockSection>
</fieldset>
</div>

</div>

</apex:tab>
<apex:tab title="person" label="Person" styleClass="tabs" id="person" status="loadingStatus" oncomplete="selectTabActionFunction('person')">
<div class="fieldSet mrn">
<fieldset><legend align="left">Person Identifier</legend>
<apex:pageBlockSection columns="1">
<apex:inputField value="{!person.Medical_Record_Number__c}"/>
</apex:pageBlockSection>
</fieldset>
</div>

</apex:tab>
<apex:tab title="Complete" label="complete" styleClass="tabs" id="complete" status="loadingStatus" oncomplete="selectTabActionFunction('complete')">
<div>
<div class="legalName fieldSet">
<fieldset><legend align="left">Person Name</legend>
<fieldset><legend align="left">Legal Name</legend>
<apex:pageBlockSection columns="1" r>
<apex:outputField value="{!person.First_Name__c}" />
<apex:outputField value="{!person.Middle_Name__c}"/>
<apex:outputField value="{!person.Last_Name__c}"/>
<apex:outputField value="{!person.Suffix__c}"/>
</apex:pageBlockSection>
</fieldset>
</fieldset>
</div>
<div class="fieldSet gender">
<fieldset><legend align="left">Gender</legend>
<apex:pageBlockSection columns="1" ">
<apex:outputField value="{!person.Gender__c}"/>
</apex:pageBlockSection>
</fieldset>
</div>
<div class="fieldSet dob">
<fieldset><legend align="left">Date of Birth *</legend>
<apex:pageBlockSection columns="1" >
<apex:outputField value="{!person.Date_of_Birth__c}"/>
</apex:pageBlockSection>
</fieldset>
</div>

<div class="fieldSet phoneNo">
<fieldset><legend align="left">Telecom</legend>
<apex:pageBlockSection columns="1" >
<apex:outputField value="{!person.Home_Phone__c}"/>
</apex:pageBlockSection>
</fieldset>
</div>

<div class="fieldSet additional">
<fieldset><legend align="left">Additional Details</legend>
<apex:pageBlockSection columns="1" rendered="{!If(!invalid,true,false)}">
<apex:outputField value="{!persont.Race__c}" />
<apex:outputField value="{!person.Ethnicity__c}" label="Ethnicity"/>
</apex:pageBlockSection>
</fieldset>
</div>
</div>


</apex:tab>
</apex:tabPanel>
</div>
<div class="wizardButons">
<apex:pageBlockSection columns="4" id="wizardButtons">
<apex:commandButton value="Cancel" action="{!cancel}"/>
<apex:commandButton value="Previous" action="{!previous}" reRender="newPerson,myhead" status="loadingStatus" disabled="{!if(tab == 'details',true,false)}"/>
<apex:commandButton value="Next" disabled="{!if(tab == 'complete',true,false)}" action="{!next}" reRender="newPerson,myhead" status="loadingStatus"/>
<apex:commandButton value="Submit" action="{!save}" reRender="newPerson,myhead" disabled="{!if(tab != 'complete')}" status="loadingStatus" oncomplete="saved()"/>
</apex:pageBlockSection>
</div>
</div>
<apex:actionFunction id="af" name="selectTabActionFunction" action="{!setTab}" reRender="wizardButtons,myhead" status="loadingStatus">
<apex:param name="selectedTab" assignTo="{!tab}" value=""/>
</apex:actionFunction>
</apex:form>
</apex:pageBlock>
</div>
</apex:component>