JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/johnschult/jquery.countdown360/master/dist/jquery.countdown360.min.js"></script>
<div id="countdown"></div>
<input type='button' id='start' value='Start Timer'/>

JavaScript

var countdown;

function initializeTimer(){
    //Initialization
    countdown = $("#countdown").countdown360({
        radius: 60,
        seconds: 20,
        label: ['sec', 'secs'],
        fontColor: '#FFFFFF',
        autostart: false,
        onComplete: function () {
            //Place AJAX call here!
            initializeTimer();
            startTimer();
        }
    });
    
    //Call this, otherwise widget does not show up on the screen. Stop immediately after.
    countdown.start();
countdown.stop();
}

//Manually invoke the first initialization
initializeTimer();

function startTimer(){
    countdown.start();
}

$('#countdown').click(function() {
  countdown.extendTimer(2);
});

//Start the timer on the button click
$('#start').click(function(){
    startTimer();
});