Associated each modal to an id - html

Question

I want each of my modal to have a unique ID. But what I am actually doing is giving me:
Syntax error, unrecognized expression: #myModal(7)
Below is my code:
<tbody class="tbodyBookTable">
#foreach (var item in Model)
{
<tr class="trBookTable">
<th>#Html.DisplayFor(modelItem => item.Title)</th>
<th>#Html.DisplayFor(modelItem => item.Author)</th>
<th>#Html.DisplayFor(modelItem => item.DateRented)</th>
<th>#Html.DisplayFor(modelItem => item.ReturnDate)</th>
<th>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal(#Html.DisplayFor(modelItem => item.BookID))">Yes</button>
<!-- Modal -->
<div class="modal fade" id="#myModal(#Html.DisplayFor(modelItem => item.BookID))" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Return confirmation</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to return this book?.</p>
<p>Book title:#Html.DisplayFor(modelItem => item.Title)</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</th>
</tr>
}
</tbody>
As you can see, I am setting my data-target as
#myModal(#Html.DisplayFor(modelItem => item.BookID))
and the id of my model in the same way. I don't understand why I am getting this error. Any help please?

Answer 1

Remove the hashtag symbol (#) from the id declaration:
<div id='myModal(' + #Html.DisplayFor(item => item.BookID) + ')'></div>
The data-target uses the hashtag symbol because it is then placed directly into jQuery to find the element. When writing the id of an HTML element, you do not write the # symbol.

Answer 2

You aren't building the id correct. Use these:
<div id='myModal(' + #Html.DisplayFor(item => item.BookID) + ')'></div>
Since # can be conflictive, don't use in elements id.