tengo un inconveniente para sacar el total, en la funcion **sacartotal** solo me **funciona con la primera fila**, en las demás no funciona, la tabla será una tabla dinámica, agradecería su ayuda, a continuación adjunto el código HTML y JavaScript.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->


    // funcion para vender por cantidad (mayor a 12 por docena).
    // funciona gracias a esta comunidad. 
    document.addEventListener("DOMContentLoaded", function() {
      document.getElementById("formulario").addEventListener('submit', validarFormulario); 
    });
    function validarFormulario(evento) {
        evento.preventDefault();
        let cant_vm = parseFloat( document.getElementById("cant_vm").value );
        let cant_actual = document.getElementsByClassName("cant_actual");

        for(var i = 0; i < cant_actual.length; i++) {
          if (parseFloat(cant_actual[i].value) < cant_vm) {
             alert("Solo se vende en cantidad, mayor a "+ cant_vm)
             cant_actual[i].focus()
             return 0; 
          }
        }
        this.submit(); 
    }

    // despues de modificar la cantidad. onchange
    // llamanos la funcion sacartotal
    function actualizar_total() {
      sacartotal();
    }

    // solo funciona con la primera fila
    // sera una tabla dinaminca.
    function sacartotal() {
        let prec = document.getElementsByClassName("prec")[0].value;
        let cant = parseFloat( document.getElementById("cant").value );
        let resul = document.getElementById("resul").value = prec*cant;
    }


<!-- language: lang-html -->

    <form action="echo.php" method="POST" id="formulario">
    <table>
    <tr>
            <td>Producto</td>
            <td>Precio</td>
            <td>Cantidad</td>
        <!-- <td>Act. Cant.</td> -->
            <td>Total</td>
    </tr>
     <tbody>

        <tr>
          <td><input type="text" name="" value="TECLADO"></td>
          <td><input type="text" name="" id="" value="50" class="prec"></td>
          <td><input type="number" name="" id="cant" value="1" class="cant_actual" 
            onchange="actualizar_total()"></td>
          <td><input type="text" name="" id="resul" value="50"></td>
        </tr>

         <tr>
          <td><input type="text" name="" value="MOUSE"></td>
          <td><input type="text" name="" id="" value="30" class="prec"></td>
          <td><input type="number" name="" id="cant" value="1" class="cant_actual"
            onchange="actualizar_total()"></td>
          <td><input type="text" name="" id="resul" value="30"></td>
        </tr>

        <tr>
          <td><input type="text" name="" value="PARLANTE"></td>
          <td><input type="text" name="" id="" value="80" class="prec"></td>
          <td><input type="number" name="" id="cant" value="1" class="cant_actual"
             onchange="actualizar_total()"></td>
          <td><input type="text" name="" id="resul" value="80"></td>
        </tr>

     </tbody>
    </table>
    <br>
    <input class="btn" type="submit" value="Entrar">
    </form>

    <br>
    <label>Solo se vende en cantidad, mayor a </label>
    <input type="text" value="12" id="cant_vm">

<!-- end snippet -->

saludos amigos, tengo un inconveniente para sacar el total, en la funcion **sacartotal** solo me **funciona con la primera fila**, en las demás no funciona, la tabla será una tabla dinámica, agradecería su ayuda, a continuación adjunto el código HTML y JavaScript.