JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h1 style="" class="sec1-head">Set 1<br/>
                    <span style="" class="quotes sec1-head-quotes">Text 1.1</span>
                    <span style="display: none;"  class="quotes sec1-head-quotes">Text 1.2</span>
                    <span style="display: none;"  class="quotes sec1-head-quotes">Text 1.3</span>
                </h1>
                
                <h1 style="" class="sec1-head">Set 2<br/>
                    <span style="" class="quotes sec1-head-quotes">Text 2.1</span>
                    <span style="display: none;"  class="quotes sec1-head-quotes">Text 2.2</span>
                    <span style="display: none;"  class="quotes sec1-head-quotes">Text 2.3</span>
                </h1>

JavaScript

(function() {

    var quotes = $(".quotes");

    var quoteIndex = -1;
    function showNextQuote() {
        ++quoteIndex;

        quotes.eq(quoteIndex % quotes.length)
        .fadeIn(1500)
        .delay(1000)
        .fadeOut(1000, showNextQuote);
        console.log(quoteIndex)
    }

    showNextQuote();



})();