Javascript 如何在ASP.NET MVC中使用JQUERY将项目列表添加到表中？

我正在做一个计费项目，我正在使用ASP.NET MVC5。我试图通过使用模式将产品添加到计费表中，当用户单击任何产品时，它将添加到表中。我将通过AJAX将所有数据发送到控制器

我有以下代码：

 <tbody>
   @foreach (var productos in Model.Inventarios)
   {
        <tr class="Search">

             <td id="">                
              @productos.Id
             </td>

             <td class="">
             <span id="P">@productos.Producto</span>
             </td>

             <td>
             <input type="text" id="Cantidad" />
             </td>

             <td class="" id="">
             <span id="Costo">Q @productos.PrecioVenta</span>
             </td>

             <td class="">
             <a id="agregarListaF" class="btn btn-primary">Add to List</a>
             </td>
         </tr>
     }
   </tbody>

@foreach（Model.Inventarios中的var productos）
{
@产品标识
@Producto.Producto
Q@productos.PrecioVenta
';
detailsTableBody.append（productItem）；
clearItem（）；
});

我的代码正常工作，但列表中只有一行正常工作。其余行不工作。我认为这是Javascript的问题，我不知道如何编码并使其工作。我如何做到这一点

---

您正在重复ID。ID应该是唯一的

$（“#agregarListaF”）

将只返回一个元素found我应该使用一个类来实现这一点吗？允许重复使用类。这将是朝着正确的方向迈出的一步。尝试了一个类并成功了，但是…，数据设置为NaN。还在挣扎。。。你在重复身份证。ID应该是唯一的

$（“#agregarListaF”）

将只返回一个元素found我应该使用一个类来实现这一点吗？允许重复使用类。这将是朝着正确的方向迈出的一步。尝试了一个类并成功了，但是…，数据设置为NaN。还在挣扎。。。

<table class="table table-striped" id="detalleTablaF">
     <thead class="">
         <tr>
         <th>COD</th>
         <th>PRODUCTO</th>
         <th>CANT.</th>
         <th>PRECIO</th>
         <th>TOTAL</th>
         </tr>
       </thead>
       <tbody></tbody>
</table>

$("#agregarListaF").click(function (e) {
        e.preventDefault();

        //if ($.trim($("#ProductoId").val()) == "" || $.trim($("#Costo").val()) == "" || $.trim($("#Unidades").val()) == "") return;



          var productName = document.getElementById("P").innerText,
            price = document.getElementById("C").innerText,
            quantity = $("#Unidades").val(),
            detailsTableBody = $("#detalleTablaF tbody");

          //alert(productName);
          //alert(price);
          //alert(quantity);

        var productItem = '<tr><td>' + productName + '</td><td>' + Math.floor(quantity) + '</td><td>' + (parseFloat(price)).toFixed(2) + '</td><td>' + (parseFloat(price) * parseInt(quantity)).toFixed(2) + '</td><td><a data-itemId="0" href="#" class="deleteItem">Quitar</a></td></tr>';
        detailsTableBody.append(productItem);
        clearItem();
    });