Link to home
Create AccountLog in
Avatar of mgmhicks
mgmhicks

asked on

How to add bootstrap tabs dynamically and duplicate look of previous tab

I have a bootstrap tab.  It has 4 tabs to allow 4 users to sign up.   If I need another user I would like to dynamically add another tab that replicates the look of the other tabs.  Each tab has the same inputs, except each tab input is named differently like App1FName, App2FName,App3FName.  

So the newly created tab needs to look like the others and relabel the inputs to App5FName, App6FName as they add tabs.

Possibe?

thanks
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Just guessing at what you are trying to do.  Assume you have code like below.
http://jsbin.com/cehifewive/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#App1FName" aria-controls="home" role="tab" data-toggle="tab">App1FName</a></li>
    <li role="presentation"><a href="#App2FName" aria-controls="profile" role="tab" data-toggle="tab">App2FName</a></li>
    <li role="presentation"><a href="#App3FName" aria-controls="messages" role="tab" data-toggle="tab">App3FName</a></li>
    <li role="presentation"><a href="#App4FName" aria-controls="settings" role="tab" data-toggle="tab">App4FName</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="App1FName">App1FName</div>
    <div role="tabpanel" class="tab-pane" id="App2FName">App2FName</div>
    <div role="tabpanel" class="tab-pane" id="App3FName">App3FName</div>
    <div role="tabpanel" class="tab-pane" id="App14FName">App4FName</div>
  </div>

</div>
</body>
</html>

Open in new window


There are 2 parts to the tab.  First is the tab itself
   <li role="presentation" class="active"><a href="#App1FName" aria-controls="home" role="tab" data-toggle="tab">App1FName</a></li>

Open in new window

Then there is the corresponding content
    <div role="tabpanel" class="tab-pane active" id="App1FName">App1FName</div>

Open in new window

Note the href is equal to the id of the content.  Knowing this, you just need to use your server side code to generate a new <li> for the additional tab and have some method to track the id (App1FName) then generate the corresponding content div.

Just curious why you need to have multiple tabs?  When you say sign up, do you mean sign in?  Why can't you do this on just one page?  What happens if you have 20 or 100 users, do you expect that many tabs and how would you want to display them on the phone vs tablet vs desktop?
Avatar of mgmhicks
mgmhicks

ASKER

Its a resident application.  I have 4 tabs like the 2 below.  If I need a 5th I would like to dynamically add it, otherwise I could just create a few more.

So not sure how to duplicate a tab, and change the id's and name tags to correspond to how these to tabs are named.

thanks


  <div class="tab-pane active" id="App1">
                                <form id="frmApp1" name="frmApp1" class="form-horizontal" action="">
                                    <!--<div class="form" id="frmApp1">-->


                                    <div class="form-group">
                                        <div class="row" id="App1-1">

                                            <div class="col-xs-2 text-right">
                                                <em>Applicant 1:  </em>
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="First Name" id="App1FName" class="form-control pName lClass name-group mustFill" data-rule-minlength="2" data-toggle="tooltip" title="First Name" name="App1FName" required />
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Last Name" id="App1LName" name="App1LName" class="form-control pName lClass mustFill" data-toggle="tooltip" title="Last Name" />

                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="MI" id="App1MI" name="App1MI" class="form-control pName lClass" data-toggle="tooltip" title="Middle Initial" />
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" id="App1BDay" name="App1BDay" class="form-control  mskDate dClass mustFill" data-toggle="tooltip" title="Birthday" placeholder="Birthday" />
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <!--<%--<asp:dropdownlist runat="server" cssclass="form-control ui-selectable">
                        <asp:listitem text="Gender" value="G"></asp:listitem>
                        <asp:listitem text="Male" value="M"></asp:listitem>
                        <asp:listitem text="Female" value="F"></asp:listitem>
                    </asp:dropdownlist>--%>-->
                                                <input type="text" id="App1Social" name="App1Social" class="form-control mskSocial dClass mustFill" data-toggle="tooltip" title="Social Security" placeholder="Social Security" />
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                &nbsp;
                                            </div>
                                        </div>
                                        <div class="row" id="App1-2">
                                            <div class="col-xs-2">
                                                &nbsp;
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Home Phone" id="App1HPhone" name="App1HPhone" class="form-control mskPhone dClass" required="required" data-toggle="tooltip" title="Home Phone" />
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Cell Phone" id="App1CPhone" name="App1CPhone" class="form-control mskPhone dClass" data-toggle="tooltip" title="Cell Phone" />

                                            </div>
                                            <div class="col-xs-3 nopadding">
                                                <input type="email" placeholder="Email Address" id="App1Email" name="App1Email" class="form-control mustFill" data-toggle="tooltip" title="Email Address" data-validation-matches-match="email" data-validation-matches-message="Must match email address entered above" required="required" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <!--<asp:DropDownList runat="server" ID="App1Contact" CssClass="form-control">
                        <asp:listitem text="Contact Method" value="0"></asp:listitem>
                        <asp:listitem text="Home Phone" value="HPhone"></asp:listitem>
                        <asp:listitem text="Cell Phone" value="CPhone"></asp:listitem>
                        <asp:listitem text="Email" value="Email"></asp:listitem>
                    </asp:DropDownList>-->
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                &nbsp;
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">

                                        <div class="row" id="App1-3">

                                            <div class="col-xs-2 text-right">
                                                <em>Current Address:</em>
                                            </div>

                                            <div class="col-xs-3 nopadding">
                                                <input type="text" placeholder="Street Address" id="App1CStreet" name="App1CStreet" class="form-control " required="required" data-toggle="tooltip" title="Street Address" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="City" id="App1CCity" name="App1CCity" class="form-control " required="required" data-toggle="tooltip" title="City" />
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="St" id="App1CState" name="App1CState" class="form-control" required="required" data-toggle="tooltip" title="State" />

                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="Zip" id="App1CZip" name="App1CZip" class="form-control dClass" required="required" data-toggle="tooltip" title="Zip" />

                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="Yrs" id="App1CLength" name="=App1Clength" class="form-control dClass" required="required" data-toggle="tooltip" title="Years" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Rent" id="App1CRent" name="App1CRent" class="form-control monInc mClass" required="required" data-toggle="tooltip" title="Rent" />

                                            </div>
                                            <!--<div class="col-xs-1">
                                                &nbsp;
                                            </div>-->
                                        </div>

                                    </div>
                                    <div class="form-group">
                                        <div class="row" id="App1-4">

                                            <div class="col-xs-2 text-right">
                                                <em>Previous Address:</em>
                                            </div>
                                            <div class="col-xs-3 nopadding">
                                                <input type="text" placeholder="Street Address" id="App1PStreet" name="App1PStreet" class="form-control " required="required" data-toggle="tooltip" title="Street Address" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="City" id="App1PCity" name="App1PCity" class="form-control " required="required" data-toggle="tooltip" title="City" />
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="St" id="App1PState" name="App1PState" class="form-control" required="required" data-toggle="tooltip" title="State" />

                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="Zip" id="App1PZip" name="App1PZip" class="form-control dClass" required="required" data-toggle="tooltip" title="Zip" />

                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="Yrs" id="App1PLength" name="App1PLength" class="form-control dClass" required="required" data-toggle="tooltip" title="Years" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Rent" id="App1PRent" name="App1PRent" class="form-control monInc mClass " required="required" data-toggle="tooltip" title="Rent" />

                                            </div>

                                        </div>
                                    </div>


                                 
                                    <div class="form-group">
                                        <div class="row" id="App1-5">

                                            <div class="col-xs-2 text-right">
                                                <em>Employment:</em>
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Employer" id="App1Employer" name="App1Employer" class="form-control " required="required" data-toggle="tooltip" title="Employer" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Position" id="App1Position" name="App1Position" class="form-control " data-toggle="tooltip" title="Position" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Supervisor's Name" id="App1Supervisor" name="App1Supervisor" class="form-control " data-toggle="tooltip" title="Supervisor's Name" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Work Phone" id="App1WPHone" name="App1WPhone" class="form-control mskPhone dClass" data-toggle="tooltip" title="Work Phone" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Monthly Income" id="App1EmpIncome" name="App1EmpIncome" class="form-control monInc mClass" data-toggle="tooltip" title="Monthly Income" />

                                            </div>
                                        </div>
                                        
                                        <div class="row" id="App1-6">


                                            <div class="col-xs-2 nopadding">
                                                &nbsp;
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Street Address" id="App1EmpStreet" name="App1EmpStreet" class="form-control " data-toggle="tooltip" title="Street Address" />


                                            </div>
                                            <div class="col-xs-2 nopadding">

                                                <input type="text" placeholder="City" id="App1EmpCity" name="App1EmpCity" class="form-control " data-toggle="tooltip" title="City" />
                                            </div>
                                            <div class="col-xs-1 nopadding">

                                                <input type="text" placeholder="St" id="App1EmpState" name="App1EmpState" class="form-control " data-toggle="tooltip" title="State" />
                                            </div>
                                            <div class="col-xs-1 nopadding">

                                                <input type="text" placeholder="Zip" id="App1EmpZip" name="App1EmpZip" class="form-control dClass " data-toggle="tooltip" title="Zip Code" />
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="Start Date" id="App1EmpStart" name="App1EmpStart" class="form-control mskDate dClass" data-toggle="tooltip" title="Start" />

                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <em>THRU</em>
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="End Date" id="App1EmpEnd" name="App1EmpEnd" class="form-control mskDate dClass" data-toggle="tooltip" title="End Date" />

                                            </div>




                                        </div>

                                    </div>

                                    <div class="form-group">
                                        <div class="row" id="App1-7">

                                            <div class="col-xs-2 text-right">
                                                <em>Vehicle Information: </em>
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="Year" id="App1CarYear" name="App1CarYear" class="form-control " data-toggle="tooltip" title="Year" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Make" id="App1CarMake" name="App1CarMake" class="form-control myUcase " required="required" data-toggle="tooltip" title="Make" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Model" id="App1CarModel" name="App1CarModel" class="form-control myUcase" data-toggle="tooltip" title="Model" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Color" id="App1CarColor" name="App1CarColor" class="form-control myUcase " data-toggle="tooltip" title="Color" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="License Plate" id="App1CarPlate" name="App1CarPlate" class="form-control myUcase" required="required" data-toggle="tooltip" title="License Plate" />

                                            </div>
                                        </div>
                                        

                                    </div>
                                    <div class="form-group">
                                        <div class="row" id="App1-8">

                                            <div class="col-xs-2 text-right">
                                                <em>Emergency Contact: </em>
                                            </div>
                                            <div class="col-xs-3 nopadding">
                                                <input type="text" placeholder="Name" id="App1ContactName" name="App1ContactName" class="form-control pName lClass" required="required" data-toggle="tooltip" title="Name" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Relationship" id="App1ContactRelationship" name="App1ContactRelationship" class="form-control " required="required" data-toggle="tooltip" title="Relationship" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Phone" id="App1ContactPhone" name="App1ContactPhone" class="form-control mskPhone dClass " required="required" data-toggle="tooltip" title="Phone" />
                                            </div>
                                            <div class="col-xs-3 nopadding">

                                            </div>

                                        </div>

                                        <div class="row" id="App1-9">
                                            <div class="col-xs-2 ">
                                                &nbsp;
                                            </div>
                                            <div class="col-xs-5 nopadding">
                                                <input type="text" placeholder="Full Address" name="App1ContactAddr" id="App1ContactAddr" class="form-control " data-toggle="tooltip" title="Full Address" />

                                            </div>
                                            <div class="col-xs-3 nopadding">
                                                <input type="email" placeholder="Email Address" id="App1ContactEmail" name="App1ContactEmail" class="form-control " required="required" data-toggle="tooltip" title="Email Address" />

                                            </div>
                                            <div class="col-xs-2 nopadding text-left">
                                            </div>
                                        </div>
                                   <br />
                                        <div class="row">
                                            <div class="col-xs-2">
                                                &nbsp;
                                            </div>
                                            <div class="col-xs-10 text-left">
                                                <input type="checkbox" id="chkApp1ContactEmployer" name="chkApp1ContactEmployer" data-toggle="tooltip" title="Authorize to talk to emergency contact about your account." />
                                                <b> <em> If you do NOT want us to discuss your account with this person, please check the box.</em></b>
                                            </div>

                                        </div>


                                        </div>
                                                                       
                                </form>
                                    
                                    </div>
                            
                      
                            <div class="tab-pane " id="App2">
                                <form id="frmApp2" name="frmApp2" method="post" class="form-horizontal" action="">
                                    <!--<div class="form" id="frmApp2">-->



                                    <div class="form-group">
                                        <div class="row" id="App2-1">

                                            <div class="col-xs-2 text-right">
                                                <em>Applicant 2:  </em>
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="First Name" id="App2FName" class="form-control pName lClass name-group" data-rule-minlength="2" data-toggle="tooltip" title="First Name" name="App2FName" required />
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Last Name" id="App2LName" name="App2LName" class="form-control pName lClass" data-toggle="tooltip" title="Last Name" />

                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="MI" id="App2MI" name="App2MI" class="form-control pName lClass" data-toggle="tooltip" title="Middle Initial" />
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" id="App2BDay" name="App2BDay" class="form-control  mskDate dClass" data-toggle="tooltip" title="Birthday" placeholder="Birthday" />
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <!--<%--<asp:dropdownlist runat="server" cssclass="form-control ui-selectable">
                            <asp:listitem text="Gender" value="G"></asp:listitem>
                            <asp:listitem text="Male" value="M"></asp:listitem>
                            <asp:listitem text="Female" value="F"></asp:listitem>
                        </asp:dropdownlist>--%>-->
                                                <input type="text" id="App2Social" name="App2Social" class="form-control mskSocial dClass" data-toggle="tooltip" title="Social Security" placeholder="Social Security" />
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                &nbsp;
                                            </div>
                                        </div>

                                        <div class="row" id="App2-2">
                                            <div class="col-xs-2">
                                                &nbsp;
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Home Phone" id="App2HPhone" name="App2HPhone" class="form-control mskPhone dClass" required="required" data-toggle="tooltip" title="Home Phone" />
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Cell Phone" id="App2CPhone" name="App2CPhone" class="form-control mskPhone dClass" data-toggle="tooltip" title="Cell Phone" />

                                            </div>
                                            <div class="col-xs-3 nopadding">
                                                <input type="email" placeholder="Email Address" id="App2Email" name="App2Email" class="form-control" data-toggle="tooltip" title="Email Address" data-validation-matches-match="email" data-validation-matches-message="Must match email address entered above" required="required" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <!--<asp:DropDownList runat="server" ID="App2Contact" CssClass="form-control">
                            <asp:listitem text="Contact Method" value="0"></asp:listitem>
                            <asp:listitem text="Home Phone" value="HPhone"></asp:listitem>
                            <asp:listitem text="Cell Phone" value="CPhone"></asp:listitem>
                            <asp:listitem text="Email" value="Email"></asp:listitem>
                        </asp:DropDownList>-->
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                &nbsp;
                                            </div>
                                        </div>
                                    </div>

                                    
                                    <div class="form-group">

                                        <div class="row" id="App2-3">

                                            <div class="col-xs-2 text-right">
                                                <em>Current Address:</em>
                                            </div>

                                            <div class="col-xs-3 nopadding">
                                                <input type="text" placeholder="Street Address" id="App2CStreet" name="App2CStreet" class="form-control " required="required" data-toggle="tooltip" title="Street Address" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="City" id="App2CCity" name="App2CCity" class="form-control " required="required" data-toggle="tooltip" title="City" />
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="St" id="App2CState" name="App2CState" class="form-control" required="required" data-toggle="tooltip" title="State" />

                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="Zip" id="App2CZip" name="App2CZip" class="form-control dClass" required="required" data-toggle="tooltip" title="Zip" />

                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="Yrs" id="App2CLength" name="=App2Clength" class="form-control dClass" required="required" data-toggle="tooltip" title="Years" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Rent" id="App2CRent" name="App2CRent" class="form-control monInc mClass" required="required" data-toggle="tooltip" title="Rent" />

                                            </div>
                                           
                                        </div>

                                    </div>
                                    <div class="form-group">
                                        <div class="row" id="App2-4">

                                            <div class="col-xs-2 text-right">
                                                <em>Previous Address:</em>
                                            </div>
                                            <div class="col-xs-3 nopadding">
                                                <input type="text" placeholder="Street Address" id="App2PStreet" name="App2PStreet" class="form-control " required="required" data-toggle="tooltip" title="Street Address" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="City" id="App2PCity" name="App2PCity" class="form-control " required="required" data-toggle="tooltip" title="City" />
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="St" id="App2PState" name="App2PState" class="form-control" required="required" data-toggle="tooltip" title="State" />

                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="Zip" id="App2PZip" name="App2PZip" class="form-control dClass" required="required" data-toggle="tooltip" title="Zip" />

                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="Yrs" id="App2PLength" name="App2PLength" class="form-control dClass" required="required" data-toggle="tooltip" title="Years" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Rent" id="App2PRent" name="App2PRent" class="form-control monInc mClass " required="required" data-toggle="tooltip" title="Rent" />

                                            </div>

                                        </div>
                                    </div>
                            
                                    <div class="form-group">
                                        <div class="row" id="App2-5">

                                            <div class="col-xs-2 text-right">
                                                <em>Employment:</em>
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Employer" id="App2Employer" name="App2Employer" class="form-control " required="required" data-toggle="tooltip" title="Employer" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Position" id="App2Position" name="App2Position" class="form-control " data-toggle="tooltip" title="Position" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Supervisor's Name" id="App2Supervisor" name="App2Supervisor" class="form-control " data-toggle="tooltip" title="Supervisor's Name" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Work Phone" id="App2WPHone" name="App2WPhone" class="form-control mskPhone dClass" data-toggle="tooltip" title="Work Phone" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Monthly Income" id="App2EmpIncome" name="App2EmpIncome" class="form-control monInc mClass" data-toggle="tooltip" title="Monthly Income" />

                                            </div>
                                        </div>

                                        <div class="row" id="App2-6">


                                            <div class="col-xs-2 nopadding">
                                                &nbsp;
                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Street Address" id="App2EmpStreet" name="App2EmpStreet" class="form-control " data-toggle="tooltip" title="Street Address" />


                                            </div>
                                            <div class="col-xs-2 nopadding">

                                                <input type="text" placeholder="City" id="App2EmpCity" name="App2EmpCity" class="form-control " data-toggle="tooltip" title="City" />
                                            </div>
                                            <div class="col-xs-1 nopadding">

                                                <input type="text" placeholder="St" id="App2EmpState" name="App2EmpState" class="form-control " data-toggle="tooltip" title="State" />
                                            </div>
                                            <div class="col-xs-1 nopadding">

                                                <input type="text" placeholder="Zip" id="App2EmpZip" name="App2EmpZip" class="form-control dClass " data-toggle="tooltip" title="Zip Code" />
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="Start Date" id="App2EmpStart" name="App2EmpStart" class="form-control mskDate dClass" data-toggle="tooltip" title="Start" />

                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <em>THRU</em>
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="End Date" id="App2EmpEnd" name="App2EmpEnd" class="form-control mskDate dClass" data-toggle="tooltip" title="End Date" />

                                            </div>




                                        </div>

                                    </div>

                                  
                                    <div class="form-group">
                                        <div class="row" id="App2-7">

                                            <div class="col-xs-2 text-right">
                                                <em>Vehicle Information: </em>
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <input type="text" placeholder="Year" id="App2CarYear" name="App2CarYear" class="form-control " data-toggle="tooltip" title="Year" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Make" id="App2CarMake" name="App2CarMake" class="form-control myUcase " required="required" data-toggle="tooltip" title="Make" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Model" id="App2CarModel" name="App2CarModel" class="form-control myUcase" data-toggle="tooltip" title="Model" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Color" id="App2CarColor" name="App2CarColor" class="form-control myUcase " data-toggle="tooltip" title="Color" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="License Plate" id="App2CarPlate" name="App2CarPlate" class="form-control myUcase" required="required" data-toggle="tooltip" title="License Plate" />

                                            </div>
                                        </div>
                                      

                                    </div>

                                    <div class="form-group">
                                        <div class="row" id="App2-8">

                                            <div class="col-xs-2 text-right">
                                                <em>Emergency Contact: </em>
                                            </div>
                                            <div class="col-xs-3 nopadding">
                                                <input type="text" placeholder="Name" id="App2ContactName" name="App2ContactName" class="form-control pName lClass" required="required" data-toggle="tooltip" title="Name" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Relationship" id="App2ContactRelationship" name="App2ContactRelationship" class="form-control " required="required" data-toggle="tooltip" title="Relationship" />

                                            </div>
                                            <div class="col-xs-2 nopadding">
                                                <input type="text" placeholder="Phone" id="App2ContactPhone" name="App2ContactPhone" class="form-control mskPhone dClass " required="required" data-toggle="tooltip" title="Phone" />
                                            </div>
                                            <div class="col-xs-3 nopadding">

                                            </div>

                                        </div>

                                        <div class="row" id="App2-9">
                                            <div class="col-xs-2 ">
                                                &nbsp;
                                            </div>
                                            <div class="col-xs-5 nopadding">
                                                <input type="text" placeholder="Full Address" name="App2ContactAddr" id="App2ContactAddr" class="form-control " data-toggle="tooltip" title="Full Address" />

                                            </div>
                                            <div class="col-xs-3 nopadding">
                                                <input type="email" placeholder="Email Address" id="App2ContactEmail" name="App2ContactEmail" class="form-control " required="required" data-toggle="tooltip" title="Email Address" />

                                            </div>
                                            <div class="col-xs-2 nopadding text-left">
                                            </div>
                                        </div>

                                        <br />
                                        <div class="row">
                                            <div class="col-xs-2">
                                                &nbsp;
                                            </div>
                                            <div class="col-xs-10 text-left">
                                                <input type="checkbox" id="chkApp2ContactEmployer" name="chkApp2ContactEmployer" data-toggle="tooltip" title="Authorize to talk to emergency contact about your account." />
                                                <b> <em> If you do NOT want us to discuss your account with this person, please check the box.</em></b>
                                            </div>

                                        </div>


                                    </div>

                                </form>
                            </div>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
I just thought of another option for your form.  You can post the single form to a page, then place it via ajax and do a replace for the name where you want,"applicant 1" or "applicant 2"
thanks for the help.  I think the best option is to do your first suggestion, that is a lot of work.  I really thought I could create a form object that reps the App1 form and then do a replace 'app1' with 'aap5' on the entire form through jquery.  

So I might just add a form or 2