Jquery inside of Jquery
<p>I'm trying to make some text inside of a jquery slideup slide down request but when I add another jquery code it shows this</p>

<pre><code>â€‹
</code></pre>

<p>So here is my code</p>

<pre><code>&lt;head&gt;
      &lt;script type="text/javascript"&gt;
&lt;!-- HIDE FROM INCOMPATIBLE BROWSERS
var fish1Position = 0;
var fish2Position = 0;
var fish3Position = 99;
var horizontal = [];
var fillPosition = 10;
var num = 100;
for(var i = 0; i &lt; 100; ++i) {
        horizontal[i] = fillPosition;
        fillPosition += 10;
}

function fish1Swim() {
        document.getElementById("fish1").style.left = horizontal[fish1Position] + "px";
        ++fish1Position;
        if (fish1Position == num) {
                fish1Position = 0;
}
var tim1 = setTimeout(fish1Swim, 100);
}
function fish2Swim(){
        document.getElementById("fish2").style.left = horizontal[fish2Position] + "px";
         ++fish2Position;
         if (fish2Position == num) {
                 fish2Position = 0;
}
var tim2 = setTimeout(fish2Swim, 200);
}

function fish3Swim() {
     document.getElementById("fish3").style.left = horizontal[fish3Position] + "px";
     ++fish3Position;
     if (fish3Position == num) {
fish3Position = 99;
}
var tim3 = setTimeout(fish3Swim, 300);
}

function startSwimming() {
        fish1Swim();
        fish2Swim();
        fish3Swim();
}

// STOP HIDING FROM INCOMPATIBLE BROWSERS --&gt;
&lt;/script&gt;
&lt;/head&gt;
////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////
&lt;body&gt;
&lt;ul&gt;
&lt;li&gt;&lt;img src='http://station2k.com/blank-hockey-puck.png' width='17px' height='17px'&gt; {$nhlteam} ​&lt;span id='fish1'&gt;{$nhlmessage}&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src='http://station2k.com/blank-hockey-puck.png' width='17px' height='17px'&gt; {$nhlteam} ​&lt;span id='fish1'&gt;{$nhlmessage}&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
/////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
&lt;!-- include jQuery core code --&gt;
&lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function() {
  function textloop() {
    // get the item that currently has the 'show' class
    var current = $('#items .show');
    /*
     * find the next item with some help from jQuery's ternary operator
     * the syntax for the ternary operator is 'a ? b : c'
     * in other words 'if a is true return b otherwise return c'
     */
    var next = current.next().length ? current.next() : current.parent().children(':first');
    // fade out the current item and remove the 'show' class
    current.delay(5000).slideUp('slow',function(){
      // fade in the next item and add the 'show' class
      next.slideDown('slow').addClass('show');
    }).removeClass('show');

    // repeat by calling the textloop method again after 3 seconds
    setTimeout(textloop,0);
  }

  // call the text loop method when the page loads
  textloop();
});
&lt;/script&gt;
</code></pre>

<p>Any help on making the text in the lists scroll? pref in a tag that I can id as I don't want the whole script scrolling right to left</p>
