Realizar Multiplicación en Inputs Dinamicos

[xfxstudios]

Buen dia, tarde o noche, les escribo porque agote mis mas básicos conocimientos en JS con respecto a esto, es decir, necesito multiplicar 2 input que se crean de manera dinamica en una factura, serial aglgo asi:

precio unitario * cantidad = total

y asi con cada linea

este es el codigo del formulario donde se crean las lineas:

Código HTML:

<form name="recarga" action="recarga_pago.php" method="POST" enctype="multipart/form-data"><table id="tablatracking" width="100%"> 
        <tbody> 
         <tr> 
                <td align="left"><input onclick="agregarUsuario()" type="button" value="Agregar Recargo" id="boton_agregar" class="btn btn-success"></td> 
          </tr>
            <tr> 
              <td width="100" id="titulo">Cédula</td>
              <td width="50">Articulo</td>
                <td width="33">Punitario</td> 
                <td width="33">Cantidad</td>
                <td width="33">Total</td>
            </tr> 
        </tbody> 
    </table>
    <input type="submit" value="Registrar" name="boton" id="boton_enviar" class="btn btn-warning" />
  </form>
 

y este es el codigo que genera las lineas dinamicamente:

Código Javascript:

// <![CDATA[ 
 
var posicionCampo = 1; 
 
 
function agregarUsuario() { 
 
    nuevaFila = document.getElementById("tablatracking").insertRow(-1); 
 
    nuevaFila.id = posicionCampo; 
 
    nuevaCelda = nuevaFila.insertCell(-1); 
 
    nuevaCelda.innerHTML = "<td><input type='text' size='15' name='cedula[" + posicionCampo + "]' value='' placeholder=' Cedula...' required readonly id='texto[" + posicionCampo + "]' /></td>"; 
    
    nuevaCelda = nuevaFila.insertCell(-1); 
 
    nuevaCelda.innerHTML = "<td><input type='text' size='70' name='articulo[" + posicionCampo + "]' value='' placeholder=' Articulo' required></td>"; 
 
    nuevaCelda = nuevaFila.insertCell(-1); 
    
    nuevaCelda.innerHTML = "<td><input type='text' size='10' name='p_unitario[" + posicionCampo + "]' id='p_unitario[" + posicionCampo + "]' value='0' placeholder=' Bs.' required'/></td>"; 
    
    nuevaCelda = nuevaFila.insertCell(-1); 
    
    nuevaCelda.innerHTML = "<td><input type='text' size='5' name='cantidad[" + posicionCampo + "]' value='0' onChange='javascript:calcula()' id='cantidad[" + posicionCampo + "]'/></td>";
    
    nuevaCelda = nuevaFila.insertCell(-1); 
    
    nuevaCelda.innerHTML = "<td><input type='text' size='15' name='total[" + posicionCampo + "]' value='' placeholder='' required id='total[" + posicionCampo + "]'/></td>";
 
    nuevaCelda = nuevaFila.insertCell(-1); 
 
    nuevaCelda.innerHTML = "<td><input type='button' id='eliminar' value='-' onclick='eliminarUsuario(this)' class='btn btn-danger'></td>"; 
    
    var copiar = document.getElementById("texto1");
    var pegar = document.getElementById("texto[" + posicionCampo + "]");
    pegar.value = copiar.value;
    
    
/*ESTA ES LA FUNCION QUE INTENTE PERO NO FUNCIONO*/
    function calcula(){
    var monto = document.getElementById("p_unitario[" + posicionCampo + "]");
    var canti = document.getElementById("cantidad[" + posicionCampo + "]");
    var calculo = monto * canti;
    
    document.getElementById("total[" + posicionCampo + "]").value = calculo;
    }
 
    posicionCampo++; 
 
} 
 
 
function eliminarUsuario(obj) { 
 
    var oTr = obj; 
 
    while(oTr.nodeName.toLowerCase() != 'tr') { 
 
        oTr=oTr.parentNode; 
 
    } 
 
    var root = oTr.parentNode; 
 
    root.removeChild(oTr); 
 
}
 

como ven esta comentada la función que intente realizar para la tarea pero no anda, cabe destacar que si esa misma función la utilizo con ciertas modificaciones para copiar el contenido de un input externo al form a otro dinamico denbtro del form, si funciona, si me pueden colaborar se los agradeceria bastante.

Gracias de antemano.