Multiplication in jQuery dynamically

Question

I am trying to make a multiplication function in jquery where which helps change the default value-based output.

For example - if I type the input#mainInput value then it will change all the inputs value base own his default value * input#mainInput and if the value == 'NaN' it will do dirent funcion.

Please help me how to I make this function in jQuery.

$(document).on('keyup', 'input#mainInput', function() {
  thisParentQtyValueBox = $(this).val();

  daughtersBoxValueAttr = $("input.input__bom").attr("inputid");

  daughtersBoxValue = $("input#daughterInput_" + daughtersBoxValueAttr).val();

  $("input#daughterInput_" + daughtersBoxValueAttr).val(thisParentQtyValueBox * daughtersBoxValue);

  if ($("input#daughterInput_" + daughtersBoxValueAttr) == 'Nan') {
    $("input#daughterInput_" + daughtersBoxValueAttr).val('3' * daughtersBoxValue)
  }
});

//If

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="mainInput" type="text" placeholder="Number" />
<br><br>
<input class="input__bom" id="daughterInput_1" type="text" placeholder="value" inputid="1" value="5" /><br/>
<input class="input__bom" id="daughterInput_2" type="text" placeholder="value" inputid="2" value="10" /><br/>
<input class="input__bom" id="daughterInput_3" type="text" placeholder="value" inputid="3" value="15" /><br/>
<input class="input__bom" id="daughterInput_4" type="text" placeholder="value" inputid="4" value="20" /><br/>
<input class="input__bom" id="daughterInput_5" type="text" placeholder="value" inputid="5" value="25" /><br/>

Answer 1

You have to store the default value in the data attr so then it will not multiple by result value and it will multiple by your default value. for dynamic multiplication, you can use jquery each. check below code.

$(document).on('input', 'input#mainInput', function() {
  thisParentQtyValueBox = parseInt( $(this).val() );
  if( Number.isNaN( thisParentQtyValueBox ) ){
    thisParentQtyValueBox = 3;
  }
  $('.input__bom').each(function(){
    $(this).val( thisParentQtyValueBox * $(this).data('value') );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="mainInput" type="text" placeholder="Number" />
<br><br>
<input class="input__bom" id="daughterInput_1" type="text" placeholder="value" inputid="1" data-value ="5" value="5" /><br/>
<input class="input__bom" id="daughterInput_2" type="text" placeholder="value" inputid="2" data-value ="10" value="10" /><br/>
<input class="input__bom" id="daughterInput_3" type="text" placeholder="value" inputid="3" data-value ="15" value="15" /><br/>
<input class="input__bom" id="daughterInput_4" type="text" placeholder="value" inputid="4" data-value ="20" value="20" /><br/>
<input class="input__bom" id="daughterInput_5" type="text" placeholder="value" inputid="5" data-value ="25" value="25" /><br/>