Scroll to problem

Scroll to problem

I have a problem with the scroll to.
I have more ul tags and inside this tags it must scrooll to a point.
In the first ul tag it works all fine but in the second ul tag it donst work.

this is the jquery with i'm using.

  1. $jq(document).ready(function () {

    $jq(document).on('click', '#letterstripe li', function(e) {
        $jq(this).toggleClass('active').siblings().removeClass('active');
        var letter = $jq(this).html();
        var id = $jq('li.[data-value="'+letter+'"]');
        var xid = $jq(id);
        if (xid.length === 0) {
            return;
        }
     var box = $jq(this).parent().parent().parent( 'ul' );
        e.preventDefault();
       var pos = xid.offset().top;
           $jq(box).scrollTo(id);
       
    });
    });
And the html looks like this
  1. <li class"first">
    <ul class="level0" style="display: block;">
    <li class="level1 first" data-value="7">
    <li class="level1" data-value="A">aa</li>
    <li class="level1" data-value="A">aaa</li>
    <li class="level1" data-value="A">aaaa</li>
    <li class="level1" data-value="A">aaaaa</li>
    <div id="stipbox">
    <ul id="letterstripe">
    <li class="letterstripe_A">A</li>
    <li class="letterstripe_B">B</li>
    <li class="letterstripe_C">C</li>
    <li class="letterstripe_D">D</li>
    <li class="letterstripe_E">E</li>
    <li class="letterstripe_F">F</li>
    <li class="letterstripe_G">G</li>
    <li class="letterstripe_H">H</li>
    <li class="letterstripe_I">I</li>
    <li class="letterstripe_J">J</li>
    <li class="letterstripe_K">K</li>
    <li class="letterstripe_L">L</li>
    <li class="letterstripe_M">M</li>
    <li class="letterstripe_N">N</li>
    <li class="letterstripe_O">O</li>
    <li class="letterstripe_P">P</li>
    <li class="letterstripe_Q">Q</li>
    <li class="letterstripe_R">R</li>
    <li class="letterstripe_S">S</li>
    <li class="letterstripe_T">T</li>
    <li class="letterstripe_U">U</li>
    <li class="letterstripe_V">V</li>
    <li class="letterstripe_W">W</li>
    <li class="letterstripe_X">X</li>
    <li class="letterstripe_Y">Y</li>
    <li class="letterstripe_Z">Z</li>
    </ul>
    </div>
    </ul>
    </li>
    <li class"second">
    <ul class="level0">
    <li class="level1 first" data-value="7">
    <li class="level1" data-value="A">aa</li>
    <li class="level1" data-value="A">aaa</li>
    <li class="level1" data-value="A">aaaa</li>
    <li class="level1" data-value="A">aaaaa</li>
    <div id="stipbox">
    <ul id="letterstripe">
    <li class="letterstripe_A">A</li>
    <li class="letterstripe_B">B</li>
    <li class="letterstripe_C">C</li>
    <li class="letterstripe_D">D</li>
    <li class="letterstripe_E">E</li>
    <li class="letterstripe_F">F</li>
    <li class="letterstripe_G">G</li>
    <li class="letterstripe_H">H</li>
    <li class="letterstripe_I">I</li>
    <li class="letterstripe_J">J</li>
    <li class="letterstripe_K">K</li>
    <li class="letterstripe_L">L</li>
    <li class="letterstripe_M">M</li>
    <li class="letterstripe_N">N</li>
    <li class="letterstripe_O">O</li>
    <li class="letterstripe_P">P</li>
    <li class="letterstripe_Q">Q</li>
    <li class="letterstripe_R">R</li>
    <li class="letterstripe_S">S</li>
    <li class="letterstripe_T">T</li>
    <li class="letterstripe_U">U</li>
    <li class="letterstripe_V">V</li>
    <li class="letterstripe_W">W</li>
    <li class="letterstripe_X">X</li>
    <li class="letterstripe_Y">Y</li>
    <li class="letterstripe_Z">Z</li>
    </ul>
    </div>
    </ul>
    </li>
When i klick in the fist li its all fine but in the second li it dosent scoll to the anker.