AboutPricingCommunityTeamsStart Free TrialLog 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
BootstrapjQueryCSS
Avatar of undefined
Last Comment
mgmhicks
8/22/2022 - Mon
Scott Fell
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?
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
Scott Fell
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Scott Fell
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"
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
mgmhicks
ASKER
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
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent