JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress" style="margin-top: 15px;  margin-right: 50px; margin-left: 50px; height: 30px">
    <div id="pbar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0%</div>
</div>
<div class="center" style="text-align: center;">
<span id="season">Novice Trainers on Site, Double Novice Gains!</span>

</div>
<hr>

<h1>Widgets: <span id="widget-count">0</span></h1>


<h2>Widget p/s: <span id="widget-ps">0</span></h2>

<div class="btn btn-success btn-lg" id="produce-widget">Produce Widget</div>

<h2>Upgrades:</h2>

<span id="test"></span>


<h2>Store:</h2>

<div class="btn btn-primary btn-sm" id="novice-widgeteer">Hire Novice Widgeteer</div>
<div class="btn btn-primary btn-sm" id="journeyman-widgeteer">Hire Jouyrneyman Widgeteer</div>
<br>
<br>
<div class="btn btn-primary btn-sm" id="expert-widgeteer">Hire Expert Widgeteer</div>
<div class="btn btn-primary btn-sm" id="master-widgeteer">Hire Master Widgeteer</div>

<h2>Widgeteers:</h2>
Novice: <span id="novice-count">0</span>

<br>Journeyman: <span id="journeyman-count">0</span>

<br>Expert: <span id="expert-count">0</span>

<br>Master: <span id="master-count">0</span>

<br>

<h2>Coding exercises:</h2>

<ul>
    <li>Change the starting costs and see how it affects the game</li>
    <li>Add two more levels of widgeteers</li>
    <li>Add stats near the top showing widgets per second and the number of widgeteers of each type</li>
    <li>Add an upgrades section</li>
    <li>Add save/load buttons that use localStorage.setItem() and localStorage.getItem()</li>
    <li>Check the Bootstrap 3 checkbox in the upper left and change the &lt;button&gt; elements to use &lt;div class="btn btn-primary"&gt; instead</li>
</ul>

JavaScript

// Basic variable declaration - keep track of how many of each
// item we currently own, and how much the new ones should cost.
var numWidgets = 0;
var widgetPS = 0;
var numNoviceWidgeteers = 0;
var numJourneymanWidgeteers = 0;
var numExpertWidgeteers = 0;
var numMasterWidgeteers = 0;
var noviceWidgeteerCost = 10;
var journeymanWidgeteerCost = 50;
var expertWidgeteerCost = 250;
var masterWidgeteerCost = 1250;
var novUpgradeAvailable = false;
var novDisabled = false;
var jrnUpgradeAvailable = false;
var jrnDisabled = false;
var expUpgradeAvailable = false;
var expDisabled = false;
var progress = 0;
var season = 0;

updateScreen();

// Increase numWidgets every time produce-widget is clicked
$('#produce-widget').on('click', function () {
    numWidgets += 100;
    updateScreen();
});

// Same for novice-widgeteer
$('#novice-widgeteer').on('click', function () {
    numNoviceWidgeteers++;

    // Deduct cost
    numWidgets -= noviceWidgeteerCost;

    // Increase cost for the next one, using Math.ceil() to round up
    noviceWidgeteerCost = Math.ceil(noviceWidgeteerCost * 1.1);

    calcWidget();
});

$('#journeyman-widgeteer').on('click', function () {
    numJourneymanWidgeteers++;
    numWidgets -= journeymanWidgeteerCost;
    journeymanWidgeteerCost = Math.ceil(journeymanWidgeteerCost * 1.1);
    calcWidget();
});

$('#expert-widgeteer').on('click', function () {
    numExpertWidgeteers++;
    numWidgets -= expertWidgeteerCost;
    expertWidgeteerCost = Math.ceil(expertWidgeteerCost * 1.1);
    calcWidget();
});

// Ditto for master-widgeteer... you get the idea
$('#master-widgeteer').on('click', function () {
    numMasterWidgeteers++;
    numWidgets -= masterWidgeteerCost;
    masterWidgeteerCost = Math.ceil(masterWidgeteerCost * 1.1);
    calcWidget();
});

/*$('#novice-training').on('click', function () {
    numNoviceWidgeteers-=5;
    numJourneymanWidgeteers++;
    calcWidget();
});*/

function noviceTraining() {
    numNoviceWidgeteers -= 5;
   ...