another health bar for sugarcube 2

i have problem about my kind of health bar feature for my game, here we go:

first we set this variable

::StoryInit
<<set $energyTotal to 100>>
<<set $energy to $energyTotal>>
<<set $energyLoss to 0>>

then in story caption, i have button which can fast forward time clock about 1 hour for one click and decrease player energy

::StoryCaption
<<button "">>
<<set $gameDate.setHours($gameDate.getHours() + 1)>>
<<set $energyLoss to 6>>
<<display "Sleepy">>
<</button>>

and here's the formula i get from greyelf and customize a little for my need

::Sleepy
<<script>>
var hBar = $('.energy-bar .stats-bar'),
	bar = hBar.find('.bar'),
	hit = hBar.find('.hit');
var total = State.variables.energyTotal,
	value = State.variables.energy,
	damage = State.variables.energyLoss,
	hitWidth = 0,
	barWidth = (value / total) * 100,
	delayReset = false;

if (damage != 0) {
	hitWidth = (damage / value) * 100;
	value -= damage;
	barWidth = (value / total) * 100;
	State.variables.energy = value;
	State.variables.energyLoss = 0;
	delayReset = true;
}

hBar.data('total', total);
hBar.data('value', value);
/*hit.css('width', hitWidth + "%");*/
bar.css('width', barWidth + "%");

if (delayReset) {
  setTimeout(function(){
	/*hit.css({'width': '0'});*/
	bar.css('width', (State.variables.energy / State.variables.energyTotal) * 100 + "%");
  }, 500);
}
<</script>>

and here's the energy bar will be display in each passage, im using passageHeader because it will show up in top of each passage or maybe its wrong, yes?

::PassageHeader
<div class="stats-wrapper energy-bar">
		<span>Energi</span>
		<div class="stats-bar">
	  		<div class="bar">
		  		<div class="hit"></div>
	  		</div>
		</div>
	</div>

this thing is works well, the energy bar is decreasing whenever i press the fast forward button..... but the problem is when i go to another passage, the enery bar is back to full (you know what i mean?) when it should be not.

what im missing here? any help will be appreciated, sorry for my bad english. thx before