JSFiddle - React, Tailwind, and code Playground

HTML

<div class="interval-example">
<div class="interval-buttons">
<input type="button" class="start-intervals" value="start multiple intervals"><input type="button" class="clear-intervals" value="clear all intervals"><input type="button" class="clear1" value="clear interval 1 by id"><input type="button" class="clear2" value="clear interval 2 by id">
</div>
<p>
<label>Interval 1 unique timer id </label><input class="id1"><br>
<label>Interval 2 unique timer id </label><input class="id2"><br>
<label>Interval 1 (updates every 5 seconds) </label><input class="interval1"><br>
<label>Interval 2 (updates every 5 seconds) </label><input class="interval2">
</p></div>

CSS

.red{
  border:1px solid red !important;
}

JavaScript

$(".interval1,.interval2").val(0);
function interval1(){
     $(".interval1").val( parseFloat( $(".interval1").val() ) + 1 );
     $(".interval1").toggleClass('red');
}
function interval2(){
     $(".interval2").val( parseFloat( $(".interval2").val() ) + 1 );
}
$(".start-intervals").click(function(){
     $(".interval1,.interval2").val(1);
     //$(".clear-intervals").click();
     intervalId = window.setInterval("interval1()",1000);
     $(".id1").attr( "data-timer-id",intervalId ).val(intervalId);
     intervalId = window.setInterval("interval2()",1000);
     $(".id2").attr( "data-timer-id",intervalId ).val(intervalId);
//alert( setInterval("") );
});
$(".clear-intervals").click(function(){
          var newTimerId = window.setInterval("function(){}");
          for (var i = 0 ; i <= newTimerId; i++) {
               window.clearInterval(i); 
          }
});
$(".clear1").click(function(){
     window.clearInterval( $(".id1").attr("data-timer-id") );
     $(".interval1").removeClass('red');
});
$(".clear2").click(function(){
     window.clearInterval( $(".id2").attr("data-timer-id") );
});