Как добавить список элементов в таблицу с помощью JQUERY в ASP.NET MVC?

Question

Я работаю над биллинговым проектом и использую 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>

Таблица счетов

<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>

Javascript

$("#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();
    });

Мой код работает нормально, но работает только одна строка в списке. Остальные ряды не работают. Я думаю, что это проблема Javascript, я не знаю, как кодировать и заставить это работать. Как мне это сделать?