jquery bunch of input values multiply by dynamic (another input)

Question

I have a grouped product and that all group can buy within a page. Page has multiple quantity inputs (like 6). And another bulk quantity input. What it must do is, After setting the normal product quantities, those values must multiply by the bulk input value.

my code does the multiplication, but not as i expect. It just multiply by the current input value. I want to do as follows. (1st attempt) Eg : Input 1 Value = 5, Input 2 value = 2, Input 3 Value = 8. Bulk Value = 10 Results should be : Input 1 = 50, Input 2 = 20, Input 3 = 80

If we gain the bulk value by 1 (2nd attempt) current Input 1 Value = 50, current Input 2 value = 20, current Input 3 Value = 80. new gained Bulk Value = 11 Results should be : Input 1 = 55, Input 2 = 22, Input 3 = 88

$('#multiply-value').change(function() {
        var multiplied = $('#multiply-value').val();
        
        var milti = 0;
        var value_of = 0;
        var test = 0;
        
    if (this.getAttribute('value') === this.value) {
        $(this).data('lastvalue', this.value);
    } else {
    if(this.value < $(this).data('lastvalue')){
        var old = $(this).data('lastvalue');
        console.log('decrement');
        $('.input-text.qty').each(function() {
              var i = 1;
             
             var qty_vals =  $(this);
                var old_v = $(this).data('lastvalue');
            old_test = old_v.val();
             test = qty_vals.val();
             
             var cals = 0;
             
             while(i < multiplied ){
                cals = +old_test + +cals;
                console.log(cals);

                 i++
             }
             $(this).val(cals);
             test = 0;
         });

    }
        else{
             console.log('increment');
            
            $('.input-text.qty').each(function() {
              var i = 1;
             
             var qty_vals =  $(this);
             test = qty_vals.val();
             
             var cals = 0;
             
             while(i <= multiplied ){
                cals = +test + +cals;
                console.log(cals);

                 i++
             }
             $(this).val(cals);
             test = 0;
         });

        }
//        console.log(this.value < $(this).data('lastvalue') ? 'decrement' : 'increment');
        $(this).data('lastvalue', this.value);
    }

        
         
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <div class=""bunch-of-inputs">
      <input type="text" name="super_group[50]" maxlength="12" value="0" title="Qty" class="input-text qty">    
      <input type="text" name="super_group[50]" maxlength="12" value="0" title="Qty" class="input-text qty">
      <input type="text" name="super_group[50]" maxlength="12" value="0" title="Qty" class="input-text qty">
   </div>
   <input id="multiply-value" type="number" value="1">
</div>

Answer 1

why not to store the original value of each field at another field rather than the value field ?

so the html will be :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <div class=""bunch-of-inputs">
      <input type="text" name="super_group[50]" maxlength="12" value="5" title="Qty" class="input-text qty" data-default="5">    
      <input type="text" name="super_group[50]" maxlength="12" value="2" title="Qty" class="input-text qty" data-default="2">
      <input type="text" name="super_group[50]" maxlength="12" value="8" title="Qty" class="input-text qty" data-default="8">
   </div>
   <input id="multiply-value" type="number" value="1" >
</div>

And the js will be:

$('#multiply-value').on('input',function() {
    var multiplied = $('#multiply-value').val();
    $('.input-text.qty').each(function() {
        $(this).val($(this).data('default') * multiplied);
    });
})

this way we don't need to store the previous value, we have the default value any time

Answer 2

/* modification start */
firsttime = true;
zero = true;
    $('#multiply-value').change(function() {

        if (firsttime && zero) {
            $('.input-text.qty').each(function() {
                this.setAttribute('value', $(this).val());

                firsttime = false;
                if($(this).val() != 0) {
                    zero = false;
                }
            });

        }
/* modification end */
        var multiplied = $('#multiply-value').val();

        var milti = 0;
        var value_of = 0;
        var test = 0;

        if (this.getAttribute('value') === this.value) {
            $(this).data('lastvalue', this.value);
        } else {
            if (this.value < $(this).data('lastvalue')) {
                var old = $(this).data('lastvalue');
                console.log('decrement');
                $('.input-text.qty').each(function() {
                    var i = 1;

                    var qty_vals = $(this);
                    var old_v = $(this).data('lastvalue');
                    old_test = old_v.val();
                    test = qty_vals.val();

                    var cals = 0;

                    while (i < multiplied) {
                        cals = +old_test + +cals;
                        console.log(cals);

                        i++
                    }
                    $(this).val(cals);
                    test = 0;
                });

            }
            else {
                console.log('increment');

                $('.input-text.qty').each(function() {
                    var i = 1;

                    var qty_vals = this; // modified, write this instead of $(this)
                    test = qty_vals.getAttribute('value'); // modification here

                    var cals = 0;

                    while (i <= multiplied) {
                        cals = +test + +cals;
                        console.log(cals);

                        i++
                    }
                    $(this).val(cals);
                    test = 0;
                });

            }
//        console.log(this.value < $(this).data('lastvalue') ? 'decrement' : 'increment');
            $(this).data('lastvalue', this.value);
        }

    })

The first inputs are set to respective value attributes. If all of the inputs are zero, then the second inputs will act as first inputs and so on. Instead of test = qty_vals.value; write, test = qty_vals.getAttribute('value'); to get original non-zero values.