JS表示件数の指定とボタンの表示切り替えができない

Question

//もっと見る　以外の1〜3までが全て実装できません。
エラーは出ていないです。
画面に反映されないので、どこが違うのかがわかりません。

前提・実現したいこと

1、3件までを表示したい（SPは2件分）
2、3件以上はもっとみるボタンをクリックして全て開くようにしたい
3、3件以下の場合は、ボタンを非表示にしたい

<div class="item_box" >
         <ul class="item" id="col">
            <li class="item_title">タイトル</li>
            <li class="item_text">内容</li>
          </ul>

        <ul class="item" id="col">
            <li class="item_title">タイトル</li>
            <li class="item_text">内容</li>
          </ul>

    　<ul class="item" id="col">
            <li class="item_title">タイトル</li>
            <li class="item_text">内容</li>
          </ul>

　　　<ul class="item" id="col">
            <li class="item_title">タイトル</li>
            <li class="item_text">内容</li>
     </ul>
     <div class="more_btn" id="more">もっとみる</div>
 </div>

<script>        
$('.item_box').each(function(i) {
　　i = i + 1; 　　　　　　　　　　　　　　　　　　　　　　　
　　var more = 3; 　　　　　//3件表示する　　　　　　　　　　　　　　　　　　
　　$("#morebtn" + i ).hide();　　
　　$("#col" + i +" li:not(:lt("+more+"))").hide();//3件以上は記事を非表示にする
　　if($("#col" + i + " li").length > more) {　//3件以上はボタンを表示する　　
   $("#morebtn" + i ).show();
　　}

　　$(".more").click(function () {　　
   id = $(this).attr("id");　　　    　　　　　　
   var num = id.substr(3,1);　　　　　　　　　　　
   if ($("#col" + num + " li:eq("+more+")").is(":hidden")) {
          $("#col" + num + " li:hidden").show();　//記事を表示する
      } else {
          $("#col" + num + " li:not(:lt("+more+"))").hide();　//記事を非表示にする
      }
　　});
});

//もっと見る
　　$(function(){
　　$('.more').click(function(){
　　$(this).hide();
　　$(this).parent('.item_box').removeClass('onhidden');
　　});
});
</script>

Comments

[kei344]

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

[m.ts10806]

現在のコードでどこまでできていて何ができていない（不明点・問題点）を記載してください。質問は編集できますので。　あと、「初心者アイコン」もご活用ください。

Answer 1

同じページで同一のid属性は使えないのでそれが原因かもしれません。id="col"の部分ですね。class属性にして見てはどうでしょうか？
それと$(".more")ではなくて$("#more")と指定する必要がありますね。ひとまずその点だけでも修正して見てはどうでしょうか。