El problema que tengo es que tengo una tabla en HTML
de la siguiente manera
<!-- TABLA DETALLES PRODUCTOS -->
<div class="col-md-12">
<table id="TableProducts" class="table table-bordered table-responsive">
<thead>
<tr class="active">
<td><strong>ID Producto</strong></td>
<td><strong>Nombre Producto</strong></td>
<td><strong>Caracteristicas</strong></td>
<td><strong>Muestras</strong></td>
<td><strong>Cantidad</strong></td>
<td><strong>Precio</strong></td>
<td><strong>Descuento</strong></td>
<td><strong>IVA</strong></td>
<td><strong>Retención IVA</strong></td>
<td><strong>Total</strong></td>
<td><strong></strong></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- FIN TABLA DETALLES PRODUCTOS -->
Yo agrego dentro del div una fila, de la siguiente manera con jquery
var fila = "<td>" + $.trim(idProduct) + "</td>";
fila += "<tr><td>" + $.trim(response.d.nombreProducto) + "</td>";
fila += '<td onclick="OpenModal(\'' + $.trim(idProduct) + '\', \'' + precio + '\');">XXXX XXXX XXXX XXXX</td>';
fila += "<td><center><input type='radio'></center></td>";
fila += "<td><a id='tableccant'>1</a></td>";
fila += "<td><a id='tablecprice'>0</a></td>";
fila += "<td><a id='tablecdescc'>0</a></td>";
fila += "<td>IVA</td>";
fila += "<td>RIVA</td>";
fila += "<td>TOTAL</td>";
fila += "<td><a class='text-danger delete'><span class='glyphicon glyphicon-remove'></span></a></td></tr>";
var ElementoHTML = $(fila);
$('#TableProducts').append(ElementoHTML);
Después de eso tengo una linea en donde mando llamar un método en donde aplico el plugin de editable de bootstrap
de la siguiente manera
//Se puede editar la tabla de dos maneras gracias al plugin
//La primera es por medio de popo up y la otra es por inline
$.fn.editable.defaults.mode = "inline";
// Sección productos
$("#tableccant").editable();
$("#tablecprice").editable();
$("#tablecdescc").editable();
Mi problema es que cuando agrego la primera fila, me funciona de maravilla, pero cuando agrego mas filas no me aplica el plugin
, alguien sabe a cual podría ser el problema