facebookの画像アップロード画面のように画像中央に＋○と表示させたい

Question

前提・実現したいこと

facebookの画像アップロード画面のように6枚目以降の画像を非表示,5枚目の色を暗くして、画像中央に＋○と表示させたいです。
言語はJavaScriptでお願いします。
プログラミングを始めて1ヶ月の初心者なので優しくご指導していただけると幸いです。

発生している問題・エラーメッセージ

6枚目以降の画像を非表示,5枚目の色を暗くして、画像中央に＋○と表示させることはできたのですが、＋○の部分がフィルターの後ろになってしまい、文字まで暗くなってしまっています。
エラーメッセージ

### 該当のソースコード

```HTML
<div class="js-gallery">
    <ul id="gallery">
      <li id="dv1" class="red-box"><a><img src="img/pic00.png"></a></li>
      <li id="dv2" class="blue-box"><a><img src="img/pic01.png"></a></li>
      <li class="yellow-box"><a><img src="img/pic02.png"></a></li>
      <li class="green-box"><a><img src="img/pic03.png"></a></li>
      <li class="pink-box">
        <a><img src="img/pic04.png"></a>
      </li>
      <li><a><img src="img/pic05.png"></a></li> 
      <!-- <li><a><img src="img/pic06.png"></a></li>  -->
    </ul>
  </div>

[css]
li {
  list-style: none;
}

li:nth-child(5) {
  position: relative;
  filter: contrast(50%); 
}

li:nth-child(n + 6) {
  display: none;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


p {
  position: absolute;
  color: white;
  font-weight: bold;
  font-size: 48px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

[JavaScript]
if (count >= 6 && h / w < 1 && h2 / w2 >= 1){
    ul.classList.add('fifth-a');
    li.classList.add('li:nth-child(5)');
    p.textContent = '+2';
    li.appendChild(p);

試したこと

画像の色を濃くするのはfilterのスタイルで行いました。しかし写真が6枚以上になった場合に＋２と表示させるJavaScriptを書きましたがfilterの後ろに行ってしまったのでz-indexを試しましたが、imgのposistionを変更するとレイアウトが崩れてしまいました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

前の質問の回答は、無視ですか？
https://teratail.com/questions/276238
初心者だからと、ついてる回答をスルーしていいわけではありません。

[m.ts10806]

ただ、指導しようにもそのためのコードも調べたことも何もないですし、応えようがないです。作業依頼でしょうか。
「自分で作りたい」のであればどんな不細工な形でもなんでも、自分で手を出してみるところからではないでしょうか。
本当に何も手を付けられないのであれば、手を出す段階ではないとも言えます。
作りたいものとそれを作るために技術が伴うかは別問題ですし、ショートカットはありません。

[madaratyou]

申し訳ありません。昨日の夜に返信していたつもりが反映されていませんでした。

[kei344]

（質問文は編集できます）質問文のHTML/CSS/JavaScriptはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、HTMLにp要素が無くJavaScriptは未定義の変数やCSS定義のないクラスが使われていますが、実際に試したコードをそのまま提示されたほうが回答が付きやすいと思います。