¿Cómo podría hacer JavaScript en un número variable de campos de entrada?

Estoy construyendo un plugin de WordPress que maneja, entre otras cosas, facturas. La idea es que cuando creo una nueva factura, el complemento genere automáticamente una línea con valores predeterminados para cada producto actualmente disponible (almacenado en otro lugar, y no siempre el mismo). El problema es que quiero poder solo ingresar cantidades y dejar que el complemento haga todos los cálculos para mí totalizando cada línea, luego un subtotal, luego un total para toda la factura. Pero mis líneas de factura se generan dinámicamente, por lo que no necesariamente sé cuántas voy a tener. Esto es lo que quiero decir:

Los productos me los da WordPress, y luego imprimo una línea en la factura de cada uno que existe, al tiempo que agrego un número al final de los nombres de los cuadros de entrada para que pueda decir cuál es cuál guarda la información más tarde.

//Define the contents of the invoice lines box function wpdsd_invoice_lines_mb_contents(){ //Get an array off all available products, sorted by item position as set by user $arguments = array( 'post_type' => 'wpdsd_product', 'numberposts' => '-1', 'order' => 'ASC', 'orderby' => 'meta_value', 'meta_key' => 'wpdsd_item_position', ); $products = get_posts($arguments); //Output an invoice line for each available product $linenumber = 0; foreach($products as $product){ ?> <input type="hidden" class="wpdsd_ID" name="wpdsd_ID_" value="ID; ?>"> <input type="text" class="wpdsd_item" name="wpdsd_item_" value="post_title; ?>"> <input type="number" class="wpdsd_qty" name="wpdsd_qty_" placeholder="Enter Qty"> $<input type="number" class="wpdsd_price" name="wpdsd_price_" step="0.01" value="wpdsd_default_price; ?>"> $<span class="wpdsd_total" id="wpdsd_total_">0.00
<input type="hidden" name="wpdsd_number_of_lines" value=""><?php }

Aquí está el HTML que recibo como resultado:

     $ $0.00
$ $0.00
$ $0.00

Para cada línea en la factura, quiero que aparezca el total cuando ingrese la cantidad. En otras palabras,

 wpdsd_total_0 = wpdsd_qty_0 * wpdsd_price_0 

También quiero calcular el total de todas las líneas, aplicar impuestos y calcular un total general.

He encontrado otras respuestas que muestran formas de decir JavaScript o jQuery para hacer los cálculos, pero debes saber los nombres de tus cuadros de entrada y el elemento en el que estás mostrando el resultado. ¿Cómo podría decirle a JavaScript que haga los cálculos para cada línea, por muchas que sean?

Editar: agregué algunas clases comunes, como se sugirió. Pero todavía no estoy seguro de lo que haría después …

Esto se puede hacer utilizando el evento onInput . Simplemente agregue el método de callback en el html de esta manera: onInput="onInputChangeHandler(this)" donde this es el elemento actual en el que se dispara el método. Lea más sobre onInput aquí .

Observe cómo solo se agrega para los campos de cantidad y valor . Cada vez que cualquiera de estos campos cambia, el método se disparará.

También observe que he agrupado cada fila en su propio

. Esto es así, solo puedo llamar al parentNode para el elemento actual cambiado y tener todos los demás elementos listos para usar. Tendría que cambiar el PHP a algo así, (también cambió a
).

 foreach($products as $product){ ?> 
$ $0.00
 function onInputChangeHandler(obj) { var parentObj = obj.parentNode; // Gets the 
var children = parentObj.children; // Gets all the inputs var quantity = children[2].value; // Get the quantity var value = children[3].value; // Get the value children[4].innerHTML = Math.round((quantity * value)*100)/100; // Calculate the total for the total child: Math.round() * 100/100 will round to second decimal place }
 
$ $ 0.00
$ $ 0.00
$ $ 0.00