JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="stylesheets/game.css">
    </head>
    <body>
        <h1><span id="fireMagicAmount">0</span><br></h1>
        <div id=main></div>
    </body>
</html>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

div span {
    margin-left: 15px;
}

#main {
    width: 100%;
    height: 80%;
}

#fireSpellTome {
    background-size: 100% 100%;
    background-image: url('../images/firetome.png');
    background-repeat: no-repeat;
}

.fireGenerators {
    position: relative;
    width: 330px;
    height: 170px;
    border:2px solid #000;
    margin-top: 1px;
}

.progressBar {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #111;
    opacity: 0.5;
}

JavaScript

var fireGenerators = ["fireSpellTome", "fireWizard", "fireTeacher", "fireSchool"];
var fireGeneratorStrings = ["Fire Spell Tome", "Fire Wizard", "Fire Teacher", "Fire School"];
var fireGeneratorAmount = new Array();

function initFireGenerators() {
    for(i = 0; i < fireGenerators.length; i++) {
        fireGeneratorAmount.push(0);

        var div = document.createElement('div');
        div.id = fireGenerators[i];
        div.className = "fireGenerators";
        div.innerHTML = fireGeneratorStrings[i];
        div.onclick = generatorClicked;

        var progressBar = document.createElement('div');
        progressBar.id = fireGenerators[i] + "ProgressBar";
        progressBar.className = "progressBar";
    
        var amount = document.createElement('span');
        amount.id = "amountFireGen" + i;
        amount.class = "fireAmounts";
        amount.innerHTML = "0";
        
        div.appendChild(progressBar);
        div.appendChild(amount);
        main.appendChild(div);
    }
}
    
    function generatorClicked() {
    console.log(this.id + " clicked");
    progressBarAnimation(this.id);
}

function progressBarAnimation(parentID) {
    const progressBar = document.getElementById(parentID + "ProgressBar"); //Get progressBar div element
    let id = null;
    let currentWidth = 0; //Set the width to 0 

    clearInterval(id);
    id = setInterval(frame, 10); //TEMPORARY - Need to check what generator and match progress with speed

    function frame() {
        if(currentWidth == 330) {
            clearInterval(id);
            progressBar.style.width = "0px";    
        }
        else {
            currentWidth++;
            progressBar.style.width = currentWidth + "px";
        }
    }

    return true;
}

initFireGenerators();