JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div class="timer">
    <div class="display"></div>
    <button>Start</button>
    <button>Stop</button>
</div>

<div class="timer">
    <div class="display"></div>
    <button>Start</button>
    <button>Stop</button>
</div>

<div class="timer">
    <div class="display"></div>
    <button>Start</button>
    <button>Stop</button>
</div>

CSS

.timer {
    background: #e0e0e0;
    padding: 10px;
}

.display {
    background: #000;
    color: white;
    padding: 5px;
}

JavaScript

var $timer = $('.timer');

$timer.on('click', 'button:contains(Start)', function (event) {
    var $element = $(event.currentTarget).closest('.timer');

    $element.data('timer', setInterval(function () {
        $element.trigger('tick');
    }, 1000));
});

$timer.on('click', 'button:contains(Stop)', function (event) {
    var $element = $(event.currentTarget).closest('.timer');
    console.log('stop');
    clearInterval($element.data('timer'));
});

$timer.on('tick', function (event) {
    var $element = $(event.currentTarget);
    var $display = $element.find('.display');
    var time = $element.data('time') || 0;
    
    $display.text(time);
    time += 1;
    $element.data('time', time);
});