sotex2,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
function getPrice(col){
var price = 1;
if(col >= 500 && col <= 1000){
price = 0.4;
}
if(col >= 1001 && col <= 5000){
price = 0.3;
}
if(col >= 5001 && col <= 10000){
price = 0.2;
}
if(col >= 10001 && col <= 50000){
price = 0.1;
}
if(col >= 50001){
price = 0.08;
}
return price;
}
$('input.one').on('input', function(e){
var col = this.value;
var price = getPrice(col);
var total = price * col;
$('input.two').val(total);
$('input.three').val(price);
});
});
</script>
</head>
<body>
<input type="number" class="one">
<input type="number" class="two">
<input type="number" class="three">
</body>
</html>