var sets = $(".set") var set = sets[0], quote = 0; sets.hide(); $(sets[0]).fadeIn(1500); function showQuote() { if($(set).children().eq(quote).is(':last-child')) { if($(set).hasClass("last")) { set = $(".set").first(); } else { set = $(set).next(); } sets.hide(); $(set).fadeIn(1500); quote = 1; } else { ++quote } $(set).children().eq(quote) .fadeIn(1500) .delay(1000) .fadeOut(1000, showQuote); } showQuote();

 <div class="row"> <div class="col-md-12 col-md-how" style=""> <div class="col-xl-12 bg-banner-text text-center" style="padding-top:3%;"> <h1 style="font-size:36pxx !important;" class="sec1-head set">How do we do it?<br/> <span style="" class="quotes sec1-head-quotes">Ethical and Humanizing AI</span> <span style="display: none;" class="quotes sec1-head-quotes">Redefine professional and academic achievement</span> <span style="display: none;" class="quotes sec1-head-quotes">Create a data driven Soft-Skills resume</span> </h1> <h1 style="font-size:36pxx !important;" class="sec1-head set last">Curating Experiences for Credentials<br/> <span style="" class="quotes sec1-head-quotes">School</span> <span style="display: none;" class="quotes sec1-head-quotes">Work</span> <span style="display: none;" class="quotes sec1-head-quotes">Internships</span> <span style="display: none;" class="quotes sec1-head-quotes">Apprenticeship</span> <span style="display: none;" class="quotes sec1-head-quotes">Workshops</span> <span style="display: none;" class="quotes sec1-head-quotes">Co-Curricular Activities</span> </h1> </div> </div> </div> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>