JSFiddle - React, Tailwind, and code Playground

HTML

<div class="right-content" id="rc-0" style="height: 250px;">
  <div class="right-cont-main" id="rcm-0" style="height: 250px;">
    <div class="scroll-line" id="sl-0" style="height: 250px;">
      <div class="scroll-top" id="st-0"></div>
      <div class="scroll-mid" id="sm-0" style="height: 248px;"></div>
      <div class="scroll-bottom" id="sb-0"></div>
    </div>
    <div class="scroll-textbox" id="stb-0" style="margin-top: -138px;">
      <input type="text" class="scroll-textbox-input right-input" value="50" id="in-1" name="txt">
    </div>
  </div>
</div>
 </div>        
</div>

JavaScript

$(document).ready(function(){
$( "body" ).on( "keyup", ".right-input", function(e) {	
	
	
	 height=$("#in-1").val();
	
	 var pattern = /^[0-9]+$/;
	
	 var chk= pattern.test(height);
	
	 if( chk==false ){  
      
	  alert('Please enter numeric value');
	 	  return;
	  
	  }
	  
	if(height=="")
	{
	//$( this).val("10");
	//alert('Please Enter Value between 10 - 150');
	return;
	}
    
    if (e.which == 38 || e.which == 104) {
        height++;
    } else if (e.which == 40 || e.which == 98) {
        height--;
    }
    
	height=parseInt(height);
    $("#in-1").val(height);
	if(height >= 151)
	{
		alert('Please Enter Value Less than 151');
		$( this).val('150');
		height=150;
		//return;
	}
	
});
});