JavaScriptを使って商品画像をカテゴリー毎に自動で表示させたい

Question

相談内容

カテゴリー毎に商品が自動で表示され、「もっと見る」をクリックすると該当のカテゴリーページにジャンプさせるためのコードを書いています。

「もっと見る」をクリックすると該当のページにジャンプさせる事はできたのですが、カテゴリー毎の商品を表示させるのがうまくいかずに困っています。

現在の状態では、タイトルの表示やリンクは問題なくできているのですが、商品画像が2つのカテゴリーが一緒になった状態で表示されてしまいます。
JavaScriptの部分が問題なのではないかと思い、数値などを変更してみたのですが解決できていない状態です。

HTML/CSSについては問題ないのですが、JavaScript初心者です。
初歩的な質問で申し訳ないのですが、ご享受いただけますでしょうか？

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• それぞれのカテゴリーアイテムを表示したい。
• カテゴリー1の商品とカテゴリー2の商品を別々に表示させたい。

該当のソースコード

  <div class="categoryItemArea innerContent">
    <div class="jost sectionTitle scrollFade">人気アイテムランキング</div>
       <div class="itemList scrollFade mainContent"></div>
          <div class="moreItems jost scrollFade">
            <a href="https://cat-only.uchineko.shop/categories/4450934">もっと見る</a>
          </div>
  </div>
  <script>
    $(function(){
      $.ajax({
        url: 'https://cat-only.uchineko.shop/categories/4450934',
        type: 'GET',
        dataType: 'html',
      }).done(function(data) {
        var items = $(data).find('.item');
        for (var i = 0; i < items.length; i++) {
          if (i <= 7) {
            $('.itemList').append(items[i]);
          }
        }

        if (items.length <= 8) {
          $(".category1ItemArea .moreItems").css("display", "none")
        }
      })
    })
  </script>
          
  <div class="categoryItemArea innerContent">
    <div class="jost sectionTitle scrollFade">春☆夏アイテム特集</div>
      <div class="itemList scrollFade mainContent"></div>
        <div class="moreItems jost scrollFade">
          <a href="https://cat-only.uchineko.shop/categories/4255225">もっと見る</a>
        </div>
  </div>
  <script>
    $(function(){
      $.ajax({
        url: 'https://cat-only.uchineko.shop/categories/4255225',
        type: 'GET',
        dataType: 'html',
      }).done(function(data) {
        var items = $(data).find('.item');
        for (var i = 0; i < items.length; i++) {
          if (i <= 7) {
            $('.itemList').append(items[i]);
          }
        }

        if (items.length <= 8) {
          $(".category2ItemArea .moreItems").css("display", "none")
        }
      })
    })
  </script>

Answer 1

そうなる理由はitemListクラスの要素に対してappendをしており、
itemListクラスの要素は(提示のHTMLでは)2つあるので2つともに同じ内容をappendしているからです。
itemListクラスがある要素にそれぞれ異なるidを付け、そのidに対してappendしてください。

Comments

[uchineko-online]

早速の回答をありがとうございます！
アドバイスいただいた通りに ' mainContent ' にそれぞれ異なるidを付けました。
それだけでは解決しなかったので、さらに ' itemList ' にも1・2と番号を付けたところ解決しました。

ありがとうございました。