JSFiddle - React, Tailwind, and code Playground

HTML

<input class="button" id="test" type="button" name="button1" value="button1"><br>
<span class='balance'></span>
<label>Баланс: 
<input type='number' min="0" readonly class='balance'><br>
<span class='food'></span>
<label>Еда: 
<input type='number' min="0" readonly class='food'><br>
<span class='Настроение'></span>
<label>Настроение: 
<input type='number' min="0" readonly class='mood'><br>
<span class='health'></span>
<label>Здоровье: 
<input type='number' min="0" readonly class='health'><br>
    <label>Состояние:    
    <span class="sost"></span>

JavaScript

var balance = 0;
var food = 100;
var mood = 100;
var health = 100;

function rapDrop(bal, bal1){
var addbalance = Math.floor(Math.random()*bal);
var removeFood = Math.floor(Math.random()*bal1+1);
var removeMood = Math.floor(Math.random()*bal1+1);
var removeHealth = Math.floor(Math.random()*bal1+1);

balance = balance + addbalance;
food = food - removeFood;
mood = mood - removeMood;
health = health -removeHealth;
$('.balance').val(balance);
$('.food').val(food);
$('.mood').val(mood);
$('.health').val(health);
 
}
$('#test').on('click',function(){
rapDrop(10, 5);

});