How to add List of items to a Table using JQUERY in ASP.NET MVC?

Question

I am working on a billing project and I am using ASP.NET MVC5. I am trying to add products to billing table by using a modal and when user clicks any product it will add to table. And I will send all data to controller via AJAX.

I have the following code:

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

Billing Table

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

My code is working OK but only one row in the list is working. The rest of the rows are not working. I think it is Javascript issue, I do not know how to code and make this work. How do I accomplish this?