Q:

balancing two input number fields but not showing values in fields in jquery

<!--js-->
 function changeValue(dropdown,source) {
 var option = dropdown.options[dropdown.selectedIndex].value;
if (option == '1' && source==0) {

    var total = 20;
$("span").text(total);
$('.balance').attr({"min":0, "max":total}).on('input', function() {
  var value = parseInt(this.value);
  var otherInputs = $('.balance').not(this);
  var remainderDiv;
  var remainder, sum;
  if (isNaN(value)) {
    value = 0;
  } else if (value > total) {
    value = total;
  } else if (value < 0) {
    value = 0;
  }
  this.value = value;
  remainder = total - value;
  remainderDiv = remainder / otherInputs.length;
  sum = value;
  $.each(otherInputs, function(input) {
    sum += Number(otherInputs[input].value);
  });
  if (sum > total) {
    otherInputs.val(remainderDiv);
  }
});
}

    else if (option == '2' && source==0) {

      var total = 20;
$("span").text(total);
$('.balance').attr({"min":0, "max":total}).on('input', function() {
  var value = parseInt(this.value);
  var otherInputs = $('.balance').not(this);
  var remainderDiv;
  var remainder, sum;
  if (isNaN(value)) {
    value = 0;
  } else if (value > total) {
    value = total;
  } else if (value < 0) {
    value = 0;
  }
  this.value = value;
  remainder = total - value;
  remainderDiv = remainder / otherInputs.length;
  sum = value;
  $.each(otherInputs, function(input) {
    sum += Number(otherInputs[input].value);
  });
  if (sum > total) {
    otherInputs.val(remainderDiv);
  }
});

    }

<!--html-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="changeValue(this,0)">
 <option value="1">1-person</option>
 <option value="2">2-10 group</option>
</select>

<input type="number" class="balance">
<input type="number" class="balance">

<!--html-->

how would you do it that the remainder doesn't go in the input field two. but it should still minus from each other though when the user puts in a value. so if max =10. when the user inputs 5 in field one and puts zero in field two that would be correct. But if he puts 5 in field one and 6 in field two that would be incorrect. how could i do that using this code. 

A:

Update: Using a dropdown to control the global MAX variable:

var MAX = 1;

function changeMax(dropdown) {
  switch (dropdown.selectedIndex) {
    case 0:
      MAX = 1;
      break;
    case 1:
      MAX = 10;
      break;
  }
}

$('.balance').on('input', function() {
  var inputs       = $(".balance");
  var currentInput = $(this);
  var otherInput   = null;
  for (var i = 0; i < inputs.length; i++) {
    if (!$(inputs[i]).is($(this))) {
      otherInput = $(inputs[i]);
    }
  }
  var currentValue = parseInt(currentInput.val(), 10);
  var otherValue   = parseInt(otherInput.val(), 10);
  if (isNaN(otherValue)) {
    otherValue = 0;
  }
  // disable entering "0000.."
  if (isNaN(currentValue)) {
    currentValue = 0;
    currentInput.val(0);
  }
  // disable entering negative values
  if (currentValue < 0) {
    currentValue = 0;
    currentInput.val(0);
  }
  var sum = currentValue + otherValue;
  if (sum > MAX) {
    var offset = sum - MAX;
    currentInput.val(currentValue - offset);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="changeMax(this)">
  <option value="1">1-person</option>
  <option value="2">2-10 group</option>
</select>


<input type="number" class="balance">
<input type="number" class="balance">

I tried to keep it as simple as it can be.
MAX is set to 10. If you enter 2 on the first input, you can enter [0,1,2,3,4,5,6,7,8] on the other input. You can also enter negative values. If you don't want to, simply uncomment the commented part.

var MAX = 10;

$('.balance').on('input', function() {
  var inputs       = $(".balance");
  var currentInput = $(this);
  var otherInput   = null;
  for (var i = 0; i < inputs.length; i++) {
    if (!$(inputs[i]).is($(this))) {
      otherInput = $(inputs[i]);
    }
  }
  var currentValue = parseInt(currentInput.val(), 10);
  var otherValue   = parseInt(otherInput.val(), 10);
  if (isNaN(otherValue)) {
    otherValue = 0;
  }
  /* if (currentValue < 0) {
   currentValue = 0;
    currentInput.val(0);
  } */
  var sum = currentValue + otherValue;
  if (sum > MAX) {
    var offset = sum - MAX;
    currentInput.val(currentValue - offset);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="balance">
<input type="number" class="balance">

