How to make 2 buttons reference separate modal forms?

Question

I have 2 different contact buttons under 2 different price category. I am trying to make it so that each "Contact Us" button opens a modal form specific to that price category.

Here are my price boxes:

    <div class="col-md-3 col-sm-6">
            <div class="pricing hover-effect">
                <div class="pricing-head">
                    <h3>Device Testing <span>Great to track gas & electric meter tests, backflow tests and PM orders.</span></h3>
                    <h4><i>$</i>50<i></i> <span>/user/month</span></h4>
                </div>
                <ul class="pricing-content list-unstyled">
                    <li><i class="icon-file-alt"></i> Ad-hoc order creation</li>
                    <li><i class="icon-list"></i> Device testing & inspection tracking</li>
                    <li><i class="icon-sitemap"></i> Track comments from the field</li>

                </ul>
                <div class="pricing-footer">
<!--                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor .</p> -->
                    <a class="btn-u" href="meter" style="font-size:15px;"> I Want to Learn More</a> 
                    <div class="pricing-contact">
                    <button data-toggle="modal" data-target="#modal-1">Contact Us</button>
                    </div>
                </div>                    
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="pricing hover-effect">
                <div class="pricing-head">
                    <h3>Professional <span>Straightforward work order management, great for those currently tracking on paper.</span></h3>
                    <h4><i>$</i>75<i></i> <span>/user/month</span></h4>
                </div>
                <ul class="pricing-content list-unstyled">
                    <li><i class="icon-map-marker"></i> Work order mapping</li>
                    <li><i class="icon-off"></i> Equipment installs & transfers</li>
                    <li><i class="icon-comments"></i> Order assignment & dispatching</li>

                </ul>
                <div class="pricing-footer">
<!--                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor .</p> -->
                        <a class="btn-u" href="professional" style="font-size:15px;"> I Want to Learn More</a>                
                        <div id=pricing-contact>
                    <div class="pricing-contact">
                    <button a href="#professional" data-toggle="modal" data-target="#modal-2" type="submit">Contact Us</button>
                    </div>
                </div>
                </div>                    
            </div>

        </div>

And the code I use to open the modal form is:

    <!-- Beginning of Pop-up Device Form -->

    <div class="btn-buy hover-effect" data-target="#modal-1" data-toggle=
    "modal"></div>

    <div class="modal fade" id="responsive" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type=
                    "button">×</button>

                    <h4 class="modal-title" id="myModalLabel">SpryMobile Device
                    Testing</h4>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <form>
                                <h4>Name</h4>

                                <p><input class="form-control" id="contactName"
                                name="contactName" type="text"></p>
                            </form>
                        </div>

                        <div class="col-md-6">
                            <h4>Email Address</h4>

                            <p><input class="form-control" id="contactEmail"
                            name="contactEmail" type="email"></p>
                        </div>

                        <div class="col-md-12">
                            <h4>Tell us about your operation</h4>
                            <textarea class="form-control" cols="20" id=
                            "contactMessage" name="contactMessage" rows="7">
</textarea>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn-u btn-u-default" data-dismiss="modal"
                    type="button">Close</button> <button class="btn-u" id=
                    "contactSubmit" name="contactSubmit">Send Message <i class=
                    "icon-spinner icon-spin" id="contactSpinner" style=
                    "display:none;"></i></button>

                    <div class="alert alert-success" id="messageSuccess" style=
                    "display:none;">
                        <button class="close" data-dismiss="alert" type=
                        "button">x</button> <strong>Thank you!</strong> We
                        appreciate your comments, and will get back to you
                        soon.
                    </div>
                </div>
            </div>
        </div>
    </div><!-- End of pop-up -->


    <!-- Beginning of Pop-up Professional Form -->

    <div class="btn-buy hover-effect" data-target="#modal-2" data-toggle=
    "modal"></div>

    <div class="modal fade" id="responsive" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type=
                    "button">×</button>

                    <h4 class="modal-title" id="myModalLabel">SpryMobile
                    Professional</h4>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <form>
                                <h4>Name</h4>

                                <p><input class="form-control" id="contactName"
                                name="contactName" type="text"></p>
                            </form>
                        </div>

                        <div class="col-md-6">
                            <h4>Email Address</h4>

                            <p><input class="form-control" id="contactEmail"
                            name="contactEmail" type="email"></p>
                        </div>

                        <div class="col-md-12">
                            <h4>Tell us about your operation</h4>
                            <textarea class="form-control" cols="20" id=
                            "contactMessage" name="contactMessage" rows="7">
</textarea>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn-u btn-u-default" data-dismiss="modal"
                    type="button">Close</button> <button class="btn-u" id=
                    "contactSubmit" name="contactSubmit">Send Message <i class=
                    "icon-spinner icon-spin" id="contactSpinner" style=
                    "display:none;"></i></button>

                    <div class="alert alert-success" id="messageSuccess" style=
                    "display:none;">
                        <button class="close" data-dismiss="alert" type=
                        "button">x</button> <strong>Thank you!</strong> We
                        appreciate your comments, and will get back to you
                        soon.
                    </div>
                </div>
            </div>
        </div>
    </div><!-- End of pop-up -->

I tried adding the code for the modal form twice and then adding ids to reference them in the button section but I had no luck... Any ideas?

Answer 1

You need to update your data-target to be unique for each modal and match the id of the corresponding modal form.

Button to launch first modal:

            <div class="pricing-contact">
                <button data-target="#modal-1" data-toggle="modal">Contact Us</button>
            </div>

First modal

            <div class="modal fade" id="modal-1" tabindex="-1">
            </div>

Button to launch second modal:

           <div class="pricing-contact">
                <button data-target="#modal-2" data-toggle="modal">Contact Us</button>
           </div>

Second modal

           <div class="modal fade" id="modal-2" tabindex="-1">
           </div>

And you don't need type="submit" in these buttons

Answer 2

You were on the right track adding code for another modal and the reference to the ids in the buttons section, however, were the ids unique?

Both modals cannot both be called "#responsive"

It's also better practice to use semantic names where possible, so consider using "#device1" and "#device2" as your two IDs.

This answer is kind of a shot in the dark but I hope it helps :)