Multiple Bootstrap Modals, Only The First Opens

I have a site with database. I create an HTML table with the content from database with success. Now I want each element in the table to be an anchor and open a modal with the info

Solution 1:

You are telling your links to open a modal from an element with a specific id. That's what data-target="#modalJog" does. You are then giving each of your containers the same id, by virtue of executing the same code within a loop. HTML elements should have unique ids (or none at all). Otherwise, only the first element with the repeated id will be recognized.

I don't know if your database table has some unique ID column (hopefully it does), but if it does, you can use that to make your element ids unique. For example, you would do something like data-target="#modalJog<?php echo $obj->id; ?>" and <div id="modalJog<?php echo $obj->id; ?>".

If you don't have an ID column in your table, then leave the id off your container divs and use data-target="a:focus+div" on your links. This will target the next-sibling div element within the DOM relative to whatever a element has focus (which would be the one being clicked).