Antes de responder la pregunta y saliéndome un poco del tema te invito a checar Salir de HTML de la página de PHP ya que veo que estas concatenando todo el HTML y eso al escribir páginas con PHP puede generar algo de ilegibilidad y dificultad al escribir código.
En la parte de Javascript también agregar código "en linea" (inline), de esta forma: onchange="onQtyChange(this.value);"
se considera una mala practica pero es válido y responderé a tu pregunta en base a esta forma. Aqui te dejo mas información: Why Should I Avoid Inline Scripting? (Puedes traducirlo del inglés).
Todo lo anterior son solo recomendaciones de mi parte.
Ahora si respecto a tu pregunta primero necesitas hacer modificaciones en tu HTML; para empezar el código PHP aquí no es relevante ya que tu problema es sobre Javascript y no PHP, así que sólo deja el HTML final que se muestra al usuario.
Primero: debes modificar en tu HMTL los id's cantidad-inicial
, si vas a tener multiples filas recuerda que un id es único y al utilizar document.getElementById
y tienes varios id's iguales te va a retornar siempre el primero que encuentre. En este caso cambiaremos ese atributo a class
.
Segundo: a cada celda Stock le agregamos un atributo data-
en este caso lo llamaremos stock
. ¿Para qué hacer esto? si te fijas en tu código al obtener el stock desde el innerHTML
este al cambiarlo ya no será el mismo, es decir, el total ya no será igual cada vez que el el input cambie.
y tercero: necesitas modificar onQtyChange(this.value);
a onQtyChange(event);
esto nos permite acceder al objeto event
del elemento que lo llama y esto para poder modificar elementos de la misma fila.
Te dejo el código javascript:
function onQtyChange(event) {
var filaTr = event.target.parentElement.parentNode; // Elemento <tr> (fila actual)
var stockTd = filaTr.querySelector('.cantidad-inicial'); // Elemento <td> (celda stock)
var valor = parseInt(event.target.value);
var cantidad = parseInt(stockTd.dataset.stock);
var total = (cantidad - valor);
stockTd.innerHTML = total;
}
En el código anterior
filaTr
: hace referencia al elemento <tr>
, la fila desde la que se encuentra el <input/>
al que estamos ingresando los valores.
stockTd
: es el elemento <td>
, la celda stock de la fila actual (filaTr
).
valor
: al igual que en tu pregunta, el valor del <input/>
.
cantidad
: el valor del atributo data-stock
de la celda <td>
stock.
y total
que es el valor que quedaría en el stock.
y el HTML:
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Stock</th>
<th>ML</th>
<th>Cantidad</th>
<th>Agregar</th>
</tr>
</thead>
<tbody>
<tr>
<td>PTDLC60</td>
<td>Producto term DLC 60</td>
<td class="cantidad-inicial" data-stock="3">3</td>
<td>60</td>
<td>
<input type="number" min="1" max="3" class="form-control" id="cantidad_PTDLC60" name="cantidad" value="1" autocomplete="off" onchange="onQtyChange(event)">
</td>
<td class="text-center">
<button type="button" class="btn btn-info" onclick="onQtyChange('PTDLC60')">
<span class="icon-plus"></span>
</button>
</td>
</tr>
</tbody>
</table>
y te dejo un JSBin para que puedas probar lo anterior.