Multiple modals opening when clicking one button - jsf

Question

I'm making a web application with JSF and recently I tried to add a modal that pops up when a certain button is pressed. My problem is that whenever I press the button, 3 modals pop up in front of each other, and I would like there to only be one modal.
I'm using beans to dynamically add information into a datatable, and the button that triggers the modal is placed in the datatable's column. Currently I have three items in my datatable, and I think the problem is that whenever I press one of the buttons, the modal is called for all 3 buttons, but I am clueless as to how to fix it.
Here is my code:
<b:row style="margin:10px;">
<b:dataTable
id="recipeTable"
var="r"
value="#{recipebean.findAll()}"
striped="true"
page-length-menu="5,10,20"
page-length="5">
<b:dataTableColumn label="Image" style="width:160px;" orderable="false">
<b:thumbnail>
<b:image value="resources/img/thumbnail.svg" style="height:150px; width: 100%;"/>
</b:thumbnail>
</b:dataTableColumn>
<b:dataTableColumn label="Title" style="width:500px;" id="ingredientTable">
<h3>#{r.name}</h3>
</b:dataTableColumn>
<b:dataTableColumn label="Date">
<h4 style="text-align: center; margin-top: 4.5em;">#{r.creationTime}</h4>
</b:dataTableColumn>
<b:dataTableColumn label="Rating">
<h4 style="text-align: center; margin-top: 4.5em;">#{r.creationTime}</h4>
</b:dataTableColumn>
<b:dataTableColumn label="Favorite" orderable="false">
<b:modal id="amodal" title="Modal Example" styleClass="modalPseudoClass">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<f:facet name="footer">
<b:button value="Close" dismiss="modal" />
<b:button value="Ok" look="primary" dismiss="modal" />
</f:facet>
</b:modal>
<b:button icon-awesome="fa-heart" style="margin-left:2em; margin-top:5em;" onclick="$('.modalPseudoClass').modal()"/>
</b:dataTableColumn>
</b:dataTable>
</b:row>

Answer 1

As Mitch mentioned above, a modal is generated in every row of the datatable. Granted, it may not be obvious from reading the sourcecode because the *.xhtml file only contains a single modal.
If you need an individual modal per row, you can probably use the id instead of the CSS class to open the modal:
<b:button icon-awesome="fa-heart" onclick="$('#{amodal.clientId}').modal()"/>
Alternatively, you can make the CSS class unique by adding a row number attribute (or something like that).
However, in general it better to move the modal out of the datatable. Otherwise, a tremendous amount of HTML code is generated, reducing the performance of your application.