website - Bootstrap 3 multiple Modal Issues -

i have page open in multiple modals. able have modal appear id="mymodal" example im trying replicate. created second 1 id="redcarpet" , cannot same window popup. im hoping can see error in code , can me fix it.

<li class="dropdown">                             <a href="#" class="dropdown-toggle dropdown" data-toggle="dropdown" data-hover="dropdown"                             data-delay="200" data-close-others="false"><span style="color: black; font-family: 'modern regular';">photos</span></a>                             <ul class="dropdown-menu">                                 <li>                                     <a href="#redcarpet">red carpet</a>                                 </li>                                 <li>                             <a href="#" data-toggle="modal" data-target="#mymodal"><span style="color: black; font-family: 'modern regular';">lead</span></a>                         </li> 

× 2015 awards

        <!-- red carpet modal -->         <!-- modal -->     <div class="modal modal-wide fade" id="redcarpet" tabindex="-1" role="dialog"     aria-labelledby="redcarpetlabel" aria-hidden="true">         <div class="modal-dialog">             <div class="modal-content">                 <div class="modal-header">                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                     <h4 class="modal-title" id="redcarpetlabel">2015 awards</h4>                 </div>                 <div class="modal-body">                     <iframe src="redcarpet.html" width="580" height="780" frameborder="0"                     allowtransparency="true"></iframe>                 </div>             </div>         </div>         <!-- /.modal-content -->     </div>     <!-- /.modal-dialog -->     <!-- /.modal -->  <!-- modal -->     <div class="modal modal-wide fade" id="mymodal" tabindex="-1" role="dialog"     aria-labelledby="mymodallabel" aria-hidden="true">         <div class="modal-dialog">             <div class="modal-content">                 <div class="modal-header">                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                     <h4 class="modal-title" id="mymodallabel">2015 billboard music awards</h4>                 </div>                 <div class="modal-body">                     <iframe src="billboardmusicawards_lead.htm" width="580" height="780" frameborder="0"                     allowtransparency="true"></iframe>                 </div>             </div>         </div>         <!-- /.modal-content -->     </div>     <!-- /.modal-dialog -->     <!-- /.modal --> 

you have changed id of modal div container redcarpet (yes, can seen in code).

however, in data-target attribute link invokes modal, still using old id (#mymodal):

<a href="#" data-toggle="modal" data-target="#mymodal">