I've two modals on a page, (i'm using bootstrap); clicking on any modal opens only the first. I don't understand js; is there an html fix?

Each modal should be given a different id and each link should be targeted to a different modal id. So it should be something like that:

<a href="#myModal" data-toggle="modal">
...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...

In this way, if you click the first link, it should pop-up the first modal and if you click the second - the second modal is popped up.

There's a bug in the Bootstrap code. I am also having the same issue and my ids for the two modal are different, yet only the first one is launched. When I remove the first one from index.html, then the second modal structure comes alive.

The workaround I used is make a function that appends the modal to the body and then pass into the difference between the two modals to be filled in dynamically. Then call function whenever you need the modal.

i.e

 function appendModuleToBody(title){      
        $('#myModal1').remove(); // remove previously appended ones if needed
        $('#myModal2').remove();
        $( "body" ).append( ` -- modal html here -- ` }