JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://google.com/" class="addTimer">ADD TIMER TO SCREEN</a>
<div class="timerContainer">
    
</div>

<a href="#" class="clearALL">STOP ALL TIMERS</a>

JavaScript

var myArray = [];
var amountOfTimers = 0;
var count = 0;
var TIMER = function(whichInstance, $elementToIncrement){
    var expose = {};
    
    expose.internalCounter = 0;
    
    expose.referenceToTimer = "";
    
    expose.createTimer = function(){
        var theInterval = setInterval(function(){
            console.log(whichInstance + " instance. Seconds: " + expose.internalCounter++);
            $elementToIncrement.html(expose.internalCounter);
        },1000);
        
        expose.referenceToTimer = theInterval;
    };
    
    expose.stopTimer = function(){
        clearInterval(expose.referenceToTimer);
        //console.log(expose.createTimer());
    };
    
    return expose;
};

$(".addTimer").on("click", function(e){
    e.preventDefault();
    count++
    var $element = $("<div class='timerRow'>"+count+". CLICK ME TO START</div>");
    $element.appendTo(".timerContainer").on("click", function(e){
        myArray[$(this).index()].createTimer();
    });
    
    myArray.push(new TIMER(amountOfTimers, $element));
    console.log(myArray);
    
    amountOfTimers++;
    
    console.log(myArray.length);
});

$(".clearALL").on("click", function(e){
    e.preventDefault();
    for(var i = 0; i < myArray.length; i++){
        myArray[i].stopTimer();
    }
});