Modal-Popup doesn't show the correct data record from database

Question

I have three data records (books) in my SQL database. I am using foreach iteration to show all three data records in a view:

iteration to view all data records:

When I click on button "Details" always the very first data record is showing, not the correct one I am clicking at, if I click on the third one, it gives me the detail information from the first record.

The code (printscreen) is written in the view page (Overview.cshtml) of the Book folder.

I was trying to create a function called SelectedBook() in the controller with parameter bookId which selects the correct book with

var bookInDb = _appDbContext.Books.Find(id);

But I don't know how to bring the correct bookInDb back to the view and show it as modal popup.

BookController.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using myBooks.Data;
using myBooks.Models;

namespace myBooks.Controllers
{
    public class BookController : Controller
    {
        private readonly AppDbContext _appDbContext;

        public BookController(AppDbContext appDbContext) //Konstruktor
        {
            _appDbContext = appDbContext;
        }

        public IActionResult Overview()
        {
            var books = _appDbContext.Books.ToList();

            ViewBag.Books = books;

            return View();
        }
}

Index.cshtml

@using myBooks.Models

<div class="card-columns">
    <div class="row row-cols-1 row-cols-md-3 g-4">
        @foreach (Book book in ViewBag.Books)
        {
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">@book.Title</h5>
                    </div>
                    <div class="card-footer">

                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                            Details
                        </button>

                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5" id="exampleModalLabel">@book.Title</h1>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        @book.Description
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-primary">Save changes</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

Book.cs

using System.ComponentModel.DataAnnotations;

namespace myBooks.Models
{
    public class Book
    {
        [Key]
        public int Id { get; set; }

        [Required]
        [StringLength(35)] //falls nicht definiert wird automatisch 24 angenommen
        public string Title { get; set; }

        [StringLength(300)]
        public string Description { get; set; }

        [Required]
        [StringLength(20)]
        public string ISBN { get; set; }
    }
}