Multiple javascript counters on the same page

Question

I'm hosting tournaments throughout the year, and have the price increasing each day. Code works, but I'm not sure 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 snippet 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>

Answer 1

I think you should use a loop to generate these HTML elements as they have the same structure. It is easier to maintain and far more less code.

Below is my solution:

<div id="eventboxcontainer"></div>
<script type="text/javascript">
    var data = [
    {
        "title" : "MLK DAY SHOWCASE",
        "img" : "https://fiftyallstars.com/Images/jammlk.gif",
        "dateRange" : "January 17-18, 2022",
        "grades" : "1st-8th",
        "deadline" : "2022-01-10",
        "start" : "2021-10-01"
    },
    {
        "title" : "PREZ DAY CHALLENGE",
        "img" : "https://fiftyallstars.com/Images/jamabe.png",
        "dateRange" : "February 17-18, 2022",
        "grades" : "1st-8th",
        "deadline" : "2022-02-10",
        "start" : "2021-10-01"
    }
    ];

    

    var days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
    var TODAY = days(new Date());

    for (var i = 0; i < data.length; i++) {

        var html = "";

        var DEADLINE = days(new Date(data[i].deadline));
        var START = days(new Date(data[i].start));

        var rate = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));

        html = '<div class="eventbox mlk activebox"><img src="' + data[i].img + '" class="holidayback">'+
               '<span class="eventlabel tourney">' + data[i].title + '</span><br><div class="numberfont eventdetails">'+
               data[i].dateRange + '<br>'+
               data[i].grades + '<br>'+
               'Current Price: <div class="rate" style="display: inline; font-weight:bold;">' + rate + '</div>'+
               '<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>';

        // you need jQuery for this
        //$("#eventboxcontainer").append(html);

        // pure Javascript
        var element = document.querySelector("#eventboxcontainer");
        element.insertAdjacentHTML('beforeend', html);


    }

</script>