Jqueryで、listの最後のみ違う動きをさせたいです。

Question

Jqueryを使って、違う文章を順番に３回表示させ、4番目の文章だけずっと表示させたいです。

現状
fadein、fadeoutを使って、文章を順番に表示させることはできています。
ですが最後の文章も同じ設定にしているので、1~3の文章と同じく消えてしまい、挙動がくり返されてしまいます。

やりたいこと
最後の文章だけをずっと表示させたい。
挙動を繰り返さず、一回繰り返したら終わりにしたい。

listの最後だけを別で設定する書き方などありませんでしょうか？
行き詰まってしまっているので、ご教示いただけると幸いです。

<div class="message-box">
    <ul class="message">
      <li class="text">
        <p>タイトル1</p><br>
        <span>文章</span>
      </li>
      <li class="text">
        <p>タイトル2</p><br>
        <span>文章</span>
      </li>
      <li class="text">
        <p>タイトル3</p><br>
        <span>文章</span>
      </li>
      <li class="text child-text">
        <p>ずっと表示させたい文章</p>
      </li>
    </ul>
</div>

const txts = $('.text');
let txtIndex = -1;
txts.hide()

function showNextTxt() {
    txtIndex++;
    txts.eq(txtIndex % txts.length).fadeIn(2000).delay(3000).fadeOut(2000, showNextTxt);
}
showNextTxt();

body {
    background-color: rgb(0, 0, 0);
    font-family: "serif";
}

.message-box {
    background-color: rgb(0, 0, 0);
    min-height: 100vh;
    width: 100%;
    position: relative;
}

.message {
    margin: 0;
    position: absolute;
    top: calc(45% - 0.5em);
    width: 100%;
    text-align: center;
    padding-left: 0;
    .text {
        color: #fff;
        list-style: none;
        p {
            font-family: "manifesto";
            margin: 0px;
            font-size: 30px;
            font-weight: bold;
        }
    }
}

Answer 1

最後の要素のときはfadeInだけにして再帰しなければいいでしょう。

const txts = $('.text');
let txtIndex = -1;
txts.hide()

function showNextTxt() {
  txtIndex++;
  if (txtIndex < txts.length - 1) {    
    txts.eq(txtIndex).fadeIn(2000).delay(3000).fadeOut(2000, showNextTxt);
  } else { 
    txts.eq(txtIndex).fadeIn(2000);
  }
}
showNextTxt();

Answer 2

シンプルにif文で分岐させてはいかがでしょうか。

const txts = $('.text');
let txtIndex = -1;
let txtMax = txts.length-1;
txts.hide() 

function showNextTxt() {
    txtIndex++;
  if(txtIndex != txtMax){
    txts.eq(txtIndex).fadeIn(200).delay(300).fadeOut(200, showNextTxt);
  }else{
    txts.eq(txtIndex).fadeIn(200);
  }
}
showNextTxt();

サンプル
https://codepen.io/recal/pen/jOGxNra

code横の文字ですが
javaではなくjQuery
cssではなくscss
が正しいかと。