jqueryにて全く同じイベントを同時進行させたい。

Question

実現したいこと

http://alphasis.info/2013/09/jquery-gyakubiki-autoscrollelement/で紹介されている、テキストが自動スクロールするjqueryを複数同時に実行させたい。

発生している問題

2つのうち、前者しかスクロースしない。

<div id="sampleBox">
    <p id="sampleText">
        ABCDEFG
    </p>
</div>


<div id="sampleBox">
    <p id="sampleText">
        HIJKLMN
    </p>
</div>

<script type="text/javascript">
jQuery( function() {
    autoScroll();
} );
var $scrollY = 0;
function autoScroll() {
    var $sampleBox = jQuery( '#sampleBox' );
    $sampleBox.scrollTop( ++$scrollY );
    if( $scrollY < $sampleBox[0].scrollHeight - $sampleBox[0].clientHeight ){
        setTimeout( "autoScroll()", 20 );
    }else{
        $scrollY = 0;
        $sampleBox.scrollTop( 0 );
        setTimeout( "autoScroll()", 20 );
    }
}
</script>

<style>
#sampleBox {
    width: 300px;
    height: 300px;
    overflow: hidden;
    background-color: yellow;
    text-align: center;
    line-height: 1.5em;
    font-size: 16px;
    border: 1px solid gray;
    border-radius: 10px;
}
#sampleText {
    margin: 300px 0;
}
</style>

Answer 1

IDが被ってるからじゃないですか？

Comments

[m.s.2000]

回答ありがとうございます。
現状idは”sampleBox”で指定しているところを、”sampleBox1”, ”sampleBox2”で分けてみましたが、
結果、後者しか機能しませんでした。

Answer 2

idではなくclassで指定してみたらどうでしょうか？

<div class="sampleBox">
    <p id="sampleText">
        ABCDEFG
    </p>
</div>


<div class="sampleBox">
    <p id="sampleText">
        HIJKLMN
    </p>
</div>

var $sampleBox = jQuery( '.sampleBox' );

Comments

[m.s.2000]

ありがとうございます。
classにしてみたら思うように実行できました。