primeramente quiero decir que no soy experto en javascript, lo que quiero es que al momento de ingresar otra cantidad o precio estas se multipliquen y me de la suma de ese item, a medida que yo vaya agregando en una tabla, no se como hacerlo he buscado por mucho por internet y necesito ayuda.

``` 
$(document).ready(function() {
   //Funcion para agregar plan a la tabla
   function plan(plan_id) {
      $.ajax({
         url: '../buscar_plan.php',
         type: 'POST',
         data: {plan_id},
         success: function (e) {
            let planes = JSON.parse(e);
            let template = '';
            let cantidad = 1;
            let total = 0.00;
            planes.forEach(plan =>{
              total = plan.valor * cantidad;
               template += `
                  <tr id=${plan.id}>
                     <td class="id">${plan.id}</td>
                     <td>${plan.nombre}</td>
                     <td valor=${plan.valor}>
                        <input class="valor" type=number value="${plan.valor}" min="0">
                     </td>
                     <td>
                        <input class="cantidad" type=number value="1" min="1">
                     </td>
                     <td>
                        <input class="total" type=number value="${total}" readonly>
                     </td>
                  </tr>
               `
            });
            $('#tablaplan').append(template);
         }
      });
   }
});
<fieldset>
           <legend>Planes</legend>
            
            <?php 
                $query = "SELECT * FROM plan; ";
                $resultado = $mysqli->query($query);
            ?>
            <label for="plan">Planes:</label>
                <select name="plan" id="plan">
                    <?php
                        foreach ($resultado as $pl):
                    ?>
                    <option value="<?php echo $pl['id']; ?>"><?php echo $pl['nombre']; ?></option>
                    <?php endforeach; ?>
                </select>
                <div class="margin-bottom alinear-derecha">
                    <a id="addplan" class="boton boton-azul">Agregar</a>
                </div>

            <table id="tabla">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Plan</th>
                        <th>Valor</th>
                        <th>Cantidad</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody id="tablaplan">
                    
                </tbody>
            </table>

        </fieldset>
```