El total de mi funcion jquery no toma el primer valor solo los demas

[clebersonweng]

tengo una funcion jquery y quiero calcular el total pero el primer subtotal no me toma soo los demas
asi tengo mi funcion


var agregarProducto = function(idProd,nombreProd,precio,cant){
var subtotal = precio * cant;
return "<tr>" +
"<td>" + nombreProd + "<input type='hidden'"+" name='productos[" + idProd + "]' value='" + cant + "'/></td>" +
"<td>" + precio + "</td>" +
"<td>" + cant + "</td>" +
"<td class='total'>" + subtotal + "</td>" +
"</tr>";
};

var agregarTotal = function(){
var total = 0;

$(".total").each(function(index, element) {
total += parseInt($(element).text());
});
$("#Total").text(total);
};

$("#agregarProducto").on("click",function(event) {
event.preventDefault();

var producto = $("#producto option:selected");
var cantidad = $("#cantidad");
var precio = $("#precio");
var subtotal = precio.val() * cantidad.val();
var html = agregarProducto(producto.val(),producto.text(),pro ducto.data("precio"),cantidad.val());
agregarTotal();
$("#detalhes-container tbody:first").append(html);


});


asi tengo en mi form
<tbody>

tr>
<td></td>
<td></td>
<td>Total:</td>
<td id ="Total"></td>
</tr>

</tbody>


alguien puede ayudarme :)