Entiendo que lo que estás buscando es presentar una tabla con varias filas y en esas filas varios inputs, un span y un botón para hacer un cálculo sobre valores de los inputs en esa fila donde se encuentra el botón.
Dado que una eventual solución al problema ha hecho pensar que Javascript es insuficiente para eso, aporto esta solución hecha en Javascript puro. En comentarios del código he puesto lo fundamental (si tienes alguna duda puedes preguntar).
La clave aquí es agregar a cada button
una clase, por ejemplo class="btnCalcular"
para poder agrupas los botones que tengan esa clase y poder agregarle un listener que ejecutará el bloque de código que haya dentro. De hecho, es recomendable evitar poner llamadas a funciones in line en los elementos, porque hace que el código sea más difícil de mantener.
Además en tu código original incurres en prácticas no recomendadas como dar el mismo id a varios elementos. Dado que las filas de la tabla se crean en un bucle, iban a haber varios elementos con ids repetidos, lo cual es totalmente desaconsejado. En este caso yo evitaría poner id a los elementos y si los necesitaras para otra cosa, lo correcto es ponerle un id combinado con un contador, para que vaya cambiando en cada iteración del bucle.
Es más, verás que para obtener los datos no hace falta el id... el código planteado echa mano de la jerarquía que existe en el DOM para conocer primero la fila en la que se encuentra el botón que fue pulsado y a continuación cada celda en esa fila y los valores que hay en ella.
Queda claro que esto se puede hacer también con jQuery, pero ... youmightnotneedjquery !
Espero te sea de utilidad.
/*
Seleccionamos todos los botones con la clase btnCalcula
*/
var allButtons = document.querySelectorAll('button.btnCalcula');
/*
A todos esos botones le aplicamos la misma función
Cualquiera de ellos que sea clickeado lanzará
este bloque de código....
*/
allButtons.forEach(function(btn, index) {
btn.addEventListener('click', function(e) {
/*
Ahora vamos a recuperar las celdas de la fila
donde se encuentra el botón para sacar los valores
y para cambiar el texto del span
*/
var thisCells = event.target.parentNode.parentNode.cells;
var valOne = thisCells[0].children[0].value;
var valTwo = thisCells[1].children[0].value;
var thisSpan = thisCells[2].children[0];
var total = parseInt(valOne) * parseInt(valTwo);
var txtSpan = `El total de tu compra es: ${total}$`;
thisSpan.textContent = txtSpan;
var cellTotal = document.getElementById('total');
var currentTotal = parseInt(cellTotal.textContent) || 0;
cellTotal.textContent = currentTotal + total;
});
});
#total {
background-color: #C8E6C9;
}
<table>
<tr>
<td><input type="text" value="10" readonly></td>
<td><input type="number"></td>
<td><span></span></td>
<td><button class="btnCalcula">Calcula</button></td>
</tr>
<tr>
<td><input type="text" value="5" readonly></td>
<td><input type="number"></td>
<td><span></span></td>
<td><button class="btnCalcula">Calcula</button></td>
</tr>
<tr>
<td>TOTAL:</td>
<td id="total"></td>
<td></td>
<td></td>
</tr>
</table>
id="valor"
,id="cantidad"
, etc..), tendrías que asignarle una clase y opcionalmente un id diferente para cada uno. También sería posible filtrarlos porname
si queres sacar un total global.