Boostrap modal zagnieżdżony w pętli

Cześć, chcę aby na mojej stronie pokazywała się tabelka z danymi i przyciskami. Każdy wiersz ma mieć przyciski do edycji, szczegółów i usuwania. Do usuwania chciałem zrobić okienko modalne. Kod tego wygląda tak:

 @foreach (MagazynierWeb.Models.ProductsModel product in Model.Products)
                    {
                    <tr class="text-center">
                        <td>
                            <div class="btn-group">
                                @Html.ActionLink("Edytuj", "EditProducts", "Forms", null, new { @class = "btn btn-success" })
                                <button type="button" class="btn btn-danger" data-toggle="modal" [email protected]("#{0}modal", product.ProductCode)>
                                    Usuń
                                </button>
                                @Html.ActionLink("Szczegóły", "ProductDetails", "Assortment", null, new { @class = "btn btn-primary" })
                            </div>
                            <div class="modal fade" [email protected]("{0}modal", product.ProductCode) tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Ostrzeżenie</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <h4>Czy na pewno chcesz usunąć produkt: @product.ProductName?</h4>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-danger" data-dismiss="modal">Nie</button>
                                            @Html.ActionLink("Tak", "DeleteProduct", "Assortment", null, new { @class = "btn btn-success" })
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>@product.ProductCode</td>
                        <td>@product.ProductName</td>
                        <td>@product.ProductGroup</td>
                        <td>@product.InventoryNumber</td>
                        <td>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="@product.Level" aria-valuemin="@product.MinLevel" aria-valuemax="@product.MaxLevel"></div>
                            </div>
                        </td>
                    </tr>
                        }

Problem w tym, że teraz przy naciśnięciu klawisa usuwającego nie otwiera się modal. Pozostawiając tak jak w przykładzie w dokumentacji dane w modalu nie są odzwierciedlone z tabeli - znaczy się są zdublowane tylko z pierwszego wiersza, zatem trzeba było każdy z id indywidualnie nazwać i właśnie od tego nie włącza się modal. Jakieś pomysły, jak to rozwiązać?