Restriction for 100

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="zeroTo100">
  
  <div class="form-group row">
    <input type="text" value ="0" class="form-control col-sm-6" min=0 max= 100 maxlength=2 readonly>
    <input type="text" class="form-control col-sm-6" min=0 max= 100 maxlength=2 data-input="f1">
  </div>

  <div class="form-group row looprow">
    <input type="text" class="form-control col-sm-6" min=0 max= 100 maxlength=2 readonly data-target="f1">
    <input type="text" class="form-control col-sm-6" min=0 max= 100 maxlength=2 data-input="f2">
  </div>
  
   <div class="form-group row looprow">
    <input type="text" class="form-control col-sm-6" min=0 max= 100 maxlength=2 readonly data-target="f2">
    <input type="text" class="form-control col-sm-6" min=0 max= 100 maxlength=2 data-input="f3">
  </div>
  
  <div class="form-group row ">
    <input type="text" class="form-control col-sm-6" min=0 max= 100 maxlength=2 readonly data-target="f3">
    <input type="text" class="form-control col-sm-6" min=0 max= 100 maxlength=2 data-input="f4">
  </div>
  
   <div class="form-group row">
    <input type="text" class="form-control col-sm-6" min=0 max= 100 maxlength=2 readonly data-target="f4">
    <input type="text" value="100" class="form-control col-sm-6" min=0 max= 100 maxlength=2 readonly>
  </div>
  
</div>

CSS

.zeroTo100{
  width: 300px;
  padding-left:50px;
  padding-top:50px;
}

.zeroTo100 input{
  margin:4px;
  display:inline-block;
  max-width:100px;
}

JavaScript

$(":input").bind("keyup change", function(e) {
   var getValueCrnt = parseInt($(this).val());
 
   var increaseVal = 1+getValueCrnt;
   var getIdentity = $(this).attr("data-input");
   var getValuePrev = $(this).prev('input').val();
   
   //Restrict value lower than readonly value
console.log(getValueCrnt);
   
   // Populate value in readonly textbox
   $('input[data-target="'+getIdentity+'"]').val(increaseVal);
   $('input[data-target="'+getIdentity+'"]').next('input').attr('min',increaseVal);
   
    if(isNaN(getValueCrnt) == true){
  		$('input[data-target="'+getIdentity+'"]').val("");
  	}
});


$(":input").focusout(function() {
  var getValueCrnt = parseInt($(this).val());
	var getValuePrev = $(this).prev('input').val();
  var getIdentity = $(this).attr("data-input");
  
  
    if((getValuePrev != 0) && (getValueCrnt != 0) && (getValuePrev > getValueCrnt)){
      $('input[data-input="'+getIdentity+'"]').val("").focus();
      $('input[data-target="'+getIdentity+'"]').val("");
    }
  
});


$(":input").focus(function() {
	
  $('.zeroTo100 .looprow').each(function(){
  	var getValFirst = $('input:first-child',this).val();
    var getValLast = $('input:last-child',this).val();
  	if(getValFirst < getValLast){
    	$('input:last-child',this).val("").focus();
    }
  
  });
  
  
});