I'm not familiar with js and tried the example shown here (jQuery - update variable when input values changed) but it's not working for me.

What I need is the following: I have a variable, that has to show the total qty entered in input fields. I.e on every input field change I have to sum the entered qty. My code is as follow:

<?PHP
$counter = 0;
?>

<div class="total">
    TotalPcs:
    <span class="running_total">
        <?= $counter ?> <!-- this is the var showing the total qty -->
    </span>
</div>
<?php
<form method="post">
    foreach ($object->getExternalProducts($orderlang) as $result) {
        print '<tr>';
        print '<td>' . $result->label . '</td>';
        print '<td><input type="number" class="qty_field" name="productid_' .$result->rowid . '" value="" /></td>';
        print '<tr>';
    }
</form>
?>

As you can see, the name of the field is populated based on SQL query and appends the ID of each product after productid_ so I cannot use the name field. I can strip the 'productid_' but it's obvious that it is easier to use 'class' or 'id' of the field.

And the JS file:

$('body').on('keyup', '.qty_field', function () {
    var sum = 0;
    $('.qty_field').each(function() {
        sum += Number($(this).val());
    });

    $('.running_total').html(sum);
});

Any help is appreciated.