JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Lorem ipsumd dolor sit amet.</h1>
<div id="div1">Answer One</div>
<div class="stop">
<button>Stop it Now.</button>
</div>

CSS

body{text-align:center;}
h1{padding:30px; margin:0 0 0 30px;}
#div1{padding:20px;margin-top:0; text-align:center;}

JavaScript

$(document).ready(function() {
	var stopLoop = false;
  $("button").click(function(){stopLoop = true;});
    var items = ["Answer Two", "Answer Three", "Answer Four", "Answer Five", "Answer Six", "Answer One"],
        $text = $( '#div1' ),
        delay = .2; //seconds
    
    function loop ( delay ) {
    	if (stopLoop) return;
        $.each( items, function ( i, elm ){
            $text.delay( delay*1E3).hide();
            $text.queue(function(){
                $text.html( items[i] );
                $text.dequeue();
            });
            $text.show();
            $text.queue(function(){
                if ( i == items.length -1 ) {
                    loop(delay);   
                }
                $text.dequeue();
            });
        });
    }

    loop( delay );
    
});