ASP.NET MVC forEach 循环仅返回 1 个值

我是ASP.NET MVC的新手，我遇到了一个问题.

我有一个显示我所有产品的视图，如下所示:

    @foreach (var shoe in Model)
    {
        <div class="shoeCard card bg-dark col-1 me-3 mb-3">

                @if (shoe.Gender == "Male")
                {
                    <div class="shoeCardBg bg-primary z-1"></div>
                }
                else
                {
                    <div class="shoeCardBg bg-danger z-1"></div>
                }
                <img src="@shoe.ImgUrl" class="card-img-top z-3" alt="@shoe.Name" style="position:relative;"  >
                <div class="card-body" id="card" onclick="Redirect()">
                    <h5 class="card-title text-light fw-bold">@shoe.Name</h5>
                    <p class="card-text text-secondary lh-sm">@shoe.Gender</p>
                    <p class="card-text text-secondary lh-sm">@shoe.Brand</p>
                    <h4 class="card-text text-light lh-sm">£@shoe.Price</h4>
                </div>
                    <button id="AddToBasket" onclick="AddToBasket()" value="@shoe.ID" class="btn btn-light mb-2">Add to Basket</button>
        </div>
    }

每个按钮都应该有一个不同ID的值，但是当我运行这个JS脚本时，只返回值1.

<script>
    function Redirect() {
        var ID = $("#AddToBasket").val();
        window.location.href = '@Url.Action("Product", "Home")/' + ID;
    }
</script>

有人知道这个问题吗？谢谢