tengo una tabla que se alimenta mediante Json de una base de datos y obtengo los datos de forma correcta, el problema que tengo es que cuando ingreso un nuevo articulo los muestra en una tabla pero si vuelvo a presionar el botón para ingresar un nuevo articulo me muestra nuevamente los datos pero junto con los anteriormente recuperados, es decir, muestro dos veces los mismos datos en la tabla y si presiono una tercera vez muestro tres veces los datos.
este es mi codigo json
function fntAddProductoI(){
let idProducto = document.querySelector('#listProducto').value;
let intPrecioI = document.querySelector('#celPrecios').innerHTML;
let intCantidadi = document.querySelector('#txtCantidadI').value;
//divLoading.style.display = "flex";
let request = (window.XMLHttpRequest) ?
new XMLHttpRequest() :
new ActiveXObject('Microsoft.XMLHTTP');
let ajaxUrl = base_url+'/Invoices/setProductoI';
let formData = new FormData();
formData.append('productoid',idProducto)
formData.append('precio',intPrecioI)
formData.append('cantidad',intCantidadi)
request.open("POST",ajaxUrl,true);
request.send(formData);
request.onreadystatechange = function(){
if(request.readyState != 4) return;
if(request.status == 200){
let objData = JSON.parse(request.responseText);
const tabla = document.querySelector('#detalleInvoice');
Object.values(objData.data).forEach(element => {
tabla.innerHTML += `
<tr>
<td colspan="2">${element.nombre}</td>
<td class="textcenter">${element.cantidad}</td>
<td class="textright">${element.precio}</td>
<td class="textright">${element.preciototal}</td>
<td class="textcenter">
<a href="#" class="link_delete textcenter" onclick="event.preventDefault(); delProducto(${element.productoid});"><i class="far fa-trash-alt"></i></a>
</td>
</tr>`
})
}
//divLoading.style.display = "none";
return false;
}
} este en mi codigo html de la tabla
<table class="table table-striped tblVenta">
<thead>
<tr>
<th>Producto</th>
<th colspan="3">Descripción</th>
<th>Cantidad</th>
<th>Precio</th>
<th>Precio Total</th>
<th>Acciones</th>
</tr>
<tr>
<th>
<select class="form-control" data-live-search="true" id="listProducto" name="listProducto" onChange="fntaddProducto()"></select>
</th>
<th colspan="3" id="celDescripcions">-</th>
<th><input type="number" name="txtCantidadI" id="txtCantidadI" value="0" min="1"></th>
<th id="celPrecios">$ 0.00</th>
<th id="celPrecioTotal">$ 0.00</th>
<th id="addProductoI"></th>
</tr>
<tr>
<th colspan="2">Producto</th>
<th>Cantidad</th>
<th class="textright">Precio</th>
<th class="textright">Precio Total</th>
<th class="textcenter">Acciones</th>
</tr>
</thead>
<tbody id="detalleInvoice">
</tbody>
<tfoot>
<tr>
<td colspan="4" class="textright">TOTAL $</td>
<td class="textright">100.00</td>
</tr>
</tfoot>
</table>