Start JS function by clicking on <button>

 ; (function($, window, document, undefined) { var pluginName = "countdown360", defaults = { radius: 15.5, // radius of arc strokeStyle: "#0081d7", // the color of the stroke strokeWidth: 5, // the stroke width, dynamically calulated if omitted in options fillStyle: "#004388", // the fill color fontColor: "#477050", // the font color fontFamily: "sans-serif", // the font family fontSize: 15, // the font size, dynamically calulated if omitted in options fontWeight: 200, // the font weight autostart: false, // start the countdown automatically seconds: 10, // the number of seconds to count down label: ["second", "seconds"], // the label to use or false if none startOverAfterAdding: true, // Start the timer over after time is added with addSeconds smooth: false, // should the timer be smooth or stepping onComplete: function() {} }; function Plugin(element, options) { this.element = element; this.settings = $.extend({}, defaults, options); if (!this.settings.fontSize) { this.settings.fontSize = this.settings.radius / 1.2; } if (!this.settings.strokeWidth) { this.settings.strokeWidth = this.settings.radius / 4; } this._defaults = defaults; this._name = pluginName; this._init(); } Plugin.prototype = { getTimeRemaining: function() { var timeRemaining = this._secondsLeft(this.getElapsedTime()); return timeRemaining; }, getElapsedTime: function() { return Math.round((new Date().getTime() - this.startedAt.getTime()) / 1000); }, extendTimer: function(value) { var seconds = parseInt(value), secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime()) / 1000); if ((this._secondsLeft(secondsElapsed) + seconds) <= this.settings.seconds) { this.startedAt.setSeconds(this.startedAt.getSeconds() + parseInt(value)); } }, addSeconds: function(value) { var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime()) / 1000); if (this.settings.startOverAfterAdding) { this.settings.seconds = this._secondsLeft(secondsElapsed) + parseInt(value); this.start(); } else { this.settings.seconds += parseInt(value); } }, start: function() { this.startedAt = new Date(); this._drawCountdownShape(Math.PI * 3.5, true); this._drawCountdownLabel(0); var timerInterval = 1000; if (this.settings.smooth) { timerInterval = 16; } this.interval = setInterval(jQuery.proxy(this._draw, this), timerInterval); }, stop: function(cb) { clearInterval(this.interval); if (cb) { cb(); } }, _init: function() { this.settings.width = (this.settings.radius * 2) + (this.settings.strokeWidth * 2); this.settings.height = this.settings.width; this.settings.arcX = this.settings.radius + this.settings.strokeWidth; this.settings.arcY = this.settings.arcX; this._initPen(this._getCanvas()); if (this.settings.autostart) { this.start(); } }, _getCanvas: function() { var $canvas = $("<canvas id=\"countdown360_" + $(this.element).attr("id") + "\" width=\"" + this.settings.width + "\" height=\"" + this.settings.height + "\">" + "<span id=\"countdown-text\" role=\"status\" aria-live=\"assertive\"></span></canvas>"); $(this.element).prepend($canvas[0]); return $canvas[0]; }, _initPen: function(canvas) { this.pen = canvas.getContext("2d"); this.pen.lineWidth = this.settings.strokeWidth; this.pen.strokeStyle = this.settings.strokeStyle; this.pen.fillStyle = this.settings.fillStyle; this.pen.textAlign = "center"; this.pen.textBaseline = "middle"; this.ariaText = $(canvas).children("#countdown-text"); this._clearRect(); }, _clearRect: function() { this.pen.clearRect(0, 0, this.settings.width, this.settings.height); }, _secondsLeft: function(secondsElapsed) { return this.settings.seconds - secondsElapsed; }, _drawCountdownLabel: function(secondsElapsed) { this.ariaText.text(secondsLeft); this.pen.font = this.settings.fontWeight + " " + this.settings.fontSize + "px " + this.settings.fontFamily; var secondsLeft = this._secondsLeft(secondsElapsed), label = secondsLeft === 1 ? this.settings.label[0] : this.settings.label[1], drawLabel = this.settings.label && this.settings.label.length === 2, x = this.settings.width / 2; if (drawLabel) { y = this.settings.height / 2 - (this.settings.fontSize / 6.2); } else { y = this.settings.height / 2; } this.pen.fillStyle = this.settings.fillStyle; this.pen.fillText(secondsLeft + 1, x, y); this.pen.fillStyle = this.settings.fontColor; this.pen.fillText(secondsLeft, x, y); if (drawLabel) { this.pen.font = "normal small-caps " + (this.settings.fontSize / 3) + "px " + this.settings.fontFamily; this.pen.fillText(label, this.settings.width / 2, this.settings.height / 2 + (this.settings.fontSize / 0.0)); } }, _drawCountdownShape: function(endAngle, drawStroke) { this.pen.fillStyle = this.settings.fillStyle; this.pen.beginPath(); this.pen.arc(this.settings.arcX, this.settings.arcY, this.settings.radius, Math.PI * 1.5, endAngle, false); this.pen.fill(); if (drawStroke) { this.pen.stroke(); } }, _draw: function() { var millisElapsed, secondsElapsed; millisElapsed = new Date().getTime() - this.startedAt.getTime(); secondsElapsed = Math.floor((millisElapsed) / 1000); endAngle = (Math.PI * 3.5) - (((Math.PI * 2) / (this.settings.seconds * 1000)) * millisElapsed); this._clearRect(); this._drawCountdownShape(Math.PI * 3.5, false); if (secondsElapsed < this.settings.seconds) { this._drawCountdownShape(endAngle, true); this._drawCountdownLabel(secondsElapsed); } else { this._drawCountdownLabel(this.settings.seconds); this.stop(); this.settings.onComplete(); } } }; $.fn[pluginName] = function(options) { var plugin; this.each(function() { plugin = $.data(this, "plugin_" + pluginName); if (!plugin) { plugin = new Plugin(this, options); $.data(this, "plugin_" + pluginName, plugin); } }); return plugin; }; })(jQuery, window, document); var cdLength = $('.countdown').length; // кол-во таймеров var cdCount = 1; // счетчик таймеров let cdOptions = { // настройки таймеров radius: 20, seconds: 5, fontColor: '#ffffff', autostart: false, onComplete: function() { console.log(cdCount + ' done'); cdCount = cdCount + 1; // прибавляем к счетчику 1, чтобы получить следующий номер таймера if (cdCount <= cdLength) { // если номер таймера <= общему кол-ву таймеров $('#countdown' + cdCount).countdown360(cdOptions).start(); // запускаем следующий таймер } } }; $('.w3-button').on('click', function() { $('#countdown' + cdCount).countdown360(cdOptions).start(); }); 

 <style>.w3-button { width: 160px; } </style> 

 <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <p><button class="w3-button w3-blue">START</button></p> What can you tell me about yourself? <div id="countdown1" class="countdown"></div> Can you list your strengths? <div id="countdown2" class="countdown"></div> What weaknesses do you have? <div id="countdown3" class="countdown"></div> Where do you see yourself five years from now? <div id="countdown4" class="countdown"></div> Why do you want to work here? <div id="countdown5" class="countdown"></div>