Multiple javascript counters on the same page

[jonsan32]

I'm hosting tounaments throughout the year, and have the price increasing each day. Code works, but I'mnot cure which elements to adjust to be able to display multiple prices adjusting simultaneously. I tried changing "rate" to "rate1" etc, but that wasn't enough... So I'm guessing variables within should be adjusted as well. Any help is appreciated. The page I'm working on is here: http://limitlesshoops.com/jamball.html -- The sinppet below is what I'm currently focused on. Thanks.

<div class="eventbox mlk activebox"><img src="https://fiftyallstars.com/Images/jammlk.gif" class="holidayback">
    <span class="eventlabel tourney">MLK DAY SHOWCASE</span><br><div class="numberfont eventdetails">
    January 17-18, 2022<br>
    Grades: 1st-8th<br>
    Current Price: <div class="rate" style="display: inline; font-weight:bold;"></div>
    <script type="text/javascript">
        const days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
const DEADLINE = days(new Date("2022-01-10"));
const START = days(new Date("2021-10-01"));
const TODAY = days(new Date());
const res = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
console.log(res);
document.querySelector('.rate').append(`$${res}`)
</script>
<br>
</div>
<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Register</div></a></td></tr></table> 
</div>



<div class="eventbox "><img src="https://fiftyallstars.com/Images/jamabe.png" class="holidayback">
    <span class="eventlabel">PREZ DAY CHALLENGE</span><br><div class="numberfont eventdetails">
    February 17-18, 2022<br>
    Grades: 1st-8th<br>
    Current Price: <div class="rate" style="display: inline; font-weight:bold;"></div>
    <script type="text/javascript">
        const days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
const DEADLINE = days(new Date("2022-02-10"));
const START = days(new Date("2021-10-01"));
const TODAY = days(new Date());
const res = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
console.log(res);
document.querySelector('.rate').append(`$${res}`)
</script>
<br>
</div>
<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Register</div></a></td></tr></table> 
</div>

[Dani]

The Javascript code executes sequentially. On line 7 you set the constant days. A constant is meant to never change. However, you set it again on line 28? I'm not sure why.

Same problem with the const DEADLINE. It's a constant, and yet you're trying to set it to two different values, on line 8 and then again on line 29. You can't do that. If you need the value to change, you need to make it not a constant. The constants START and TODAY just need to be set once as well.