How to subtract two div by their ID?

I have some range sliders and input fields. From that I’m getting some equations now I want to subtract those dynamic numbers by their ID. Below is the code but I’m getting NaN value. Below the steps, I’ve done.

  1. Getting #totalavgtime from the multiplication of range slider and .averagetime
  2. Getting #timetoproduce from the multiplication of range slider and .radio-roi next input value.
  3. Now trying to subtract #totalavgtime – #timetoproduce but getting NaN value in #timesaving.

$(document).ready(function() {
  $(".range").on("change", function() {
    var mult = 0;
    $('.range').each(function(i) {
      var selector_next = parseInt($(".averagetime:eq(" + i + ")").attr("value"))
      mult += parseInt($(this).val()) * selector_next //multply..
      console.log($(".averagetime:eq(" + i + ")").attr("value"), $(this).val())
    })
    $("#totalavgtime").val(mult)
  })
});

$(document).ready(function() {
  $('.range').on('change', function() {
    let n  = $(this).attr('id').match(/d+/g)[0];
    let total = 0;
    let checkVal = $('.radio-roi:checked').next('input').val();
    let multiplyFactor = parseFloat(checkVal);
    console.log(multiplyFactor)
    $('.range').each(function() {
      total += (parseFloat($(this).val()) * multiplyFactor);
    });
    $('#timetoproduce').value(total);
  })
});

$(document).ready(function() {
  var txt1 = parseInt(document.getElementById("totalavgtime").value);
  var txt2 = parseFloat(document.getElementById("timetoproduce").value);
  var res = document.getElementById("timesaving");
  Number(txt1);
  Number(txt2);
  
 //Substract that
  res.value = txt1 - txt2;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input type="radio" id="" class="radio-roi" name="plan" value="plus" checked>
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled><br>

<input type="radio" id="" class="radio-roi" name="plan" value="pro">
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled><br>

<input type="text"value="6" id="avgtime-id" class="averagetime"disabled><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider"><br>


<input type="text"id="totalavgtime" value="" disabled><br>
<input type="text"id="timetoproduce" value="" disabled><br>
<input type="text"id="timesaving" value="" disabled><br>

Answer

You can merge both event handler in one as both are triggering same elements . So , inside this on each iteration get value of range slider and add total to same variable and set them in required input . Now , to subtract them check if the value is not null depending on this take value of input else take 0 to avoid NaN error.

Demo Code :

$(document).ready(function() {
  $(".range").on("change", function() {
    $(this).next().text($(this).val()) //for output(range)
    var selector_next_avg = 0;
    var timetoproduce = 0
    var checkVal = parseFloat($('.radio-roi:checked').next('input').val()); //radio next input
    $('.range').each(function(i) {
      var selector_next = parseInt($(".averagetime:eq(" + i + ")").val()) //avg..input
      selector_next_avg += parseInt($(this).val()) * selector_next;
      timetoproduce += (parseFloat($(this).val()) * checkVal);

    })
    //set both values
    $("#totalavgtime").val(selector_next_avg)
    $('#timetoproduce').val(timetoproduce);
    total() //call to total..(sub)
  })
});



function total() {
  var txt1 = $("#totalavgtime").val() != "" ? parseFloat($("#totalavgtime").val()) : 0; //if null take 0
  var txt2 = $("#timetoproduce").val() != "" ? parseFloat($("#timetoproduce").val()) : 0;
  $("#timesaving").val(txt1 - txt2); //set value

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input type="radio" id="" class="radio-roi" name="plan" value="plus" checked>
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled><br>

<input type="radio" id="" class="radio-roi" name="plan" value="pro">
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled><br>

<input type="text" value="6" id="avgtime-id" class="averagetime" disabled><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider"><output></output><br>


<input type="text" id="totalavgtime" value="" disabled><br>
<input type="text" id="timetoproduce" value="" disabled><br>
<input type="text" id="timesaving" value="" disabled><br>