JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div id="animation-play" class="play">
    click
</div>
<br/>
<input id="chart-years" />

JavaScript

jQuery('#animation-play').on('click', function() {
    
    clearInterval( $(this).data('animation') );
    
    if (jQuery('#animation-play').hasClass('play')) {
        jQuery('#animation-play').addClass('stop')
                                 .removeClass('play')
                                 .text('Pause Animation');
                                 
        var years = [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015];
        var time  = 1000;
        var self  = $(this);
        
        self.data('year', self.data('year') || -1);
        
        self.data('animation', 
            setInterval(function() {
            	var idx   = self.data('year') + 1;
                if ( idx > years.length ) {
                	idx = 0;
                    self.trigger('click');
                } else {
                    var value = years[idx];

                    //selectChartYear(value);
                    jQuery("#chart-years").val(value);
                }
                
				self.data('year', idx);
            }, time)
        );
    } else {
        jQuery('#animation-play').addClass('play')
        						 .removeClass('stop')
                                 .text('Play Animation');
                                 
    }
});