简单的jQuery变量问题-变量冲突

我想在这里使用这个伟大的jQuery文本滑块:http://codepen.io/mikedevelops/pen/eNjeJm

但是我真的需要在同一个页面上有两个滑块。我试图复制代码并更改第二个滑块中的变量名称，以防止出现问题-但似乎无法让它工作。下面是我的尝试，使用jquery: http://codepen.io/hardanger/pen/NqmOom

为了明确，我认为这是变量的问题。

// add as many adjectives as you like!
var adjs = ["very cool", "really exciting", " super awesome", "jQuery sliding"],
sentence = $('#sentence'),
adjList = $('#adjList'),
stop = false;
    // function to return the most up-to-date
    // version of our adjective list
    function getList() {
       return $('.adj');
    }
    // function to build the adjective list
    // args: adjective array
    function build(arr) {
       for (i=0; i<arr.length; i++) {
          var item = "<li class='adj'>";
          $(adjList).append(item + arr[i] + "</li>");
       }
    }
    // function to resize adjective list
    // args: adjective list item
    function resize(el) {
       $(adjList).animate({
          width: $(el).width(),
       }, 200);
    }
    // function to add slide-in transition
    // args: element that needs to slide
    function slideIn(el) {
       // duration slide is on screen
       var hold = 1000;
       // resize area to sliding element
       resize($(el));
       // add slide-in class
       $(el).addClass('slide-in');  
       // after 'hold' duration slide-out current item
       // then slide in next item
       setTimeout(function(){
          // check to see if loop should continue
          if (stop === true) {
             stop = false;
             return;
          }
          // slide current element out
          slideOut(el);
          // slide in next element in queue
          slideIn($(el).next());
}, hold);
    }
    // function to add slide-out transition
    // args: element that needs to slide
    function slideOut(el) {
// remove current class and add slide-out transition
$(el).removeClass('slide-in').addClass('slide-out');
// wait for slide tramsition to finish then
// call 'change' function
setTimeout(function(){
    change();
}, 200);
    }
    // function to re-arrange adjective list
    function change() { 
// store last item index
var i = adjs.length - 1;
// detach element that has slide-out class
// put to the bottom of the list after
// the last item
$('.adj:eq(' + i + ')').after($('.slide-out').detach());
// remove class to send element back to original position
$('.adj').removeClass('slide-out');
    }
    // build slider
    build(adjs);
    // init loop
    slideIn(getList()[0]);

    // second slider

    // add as many adjectives as you like!
    var adjs2 = ["test", "test", " testtesttesttesttesttest", "test"],
sentence2 = $('#sentence2'),
adjList2 = $('#adjList2'),
stop = false;
    // function to return the most up-to-date
    // version of our adjective list
    function getList2() {
return $('.adj2');
    }
    // function to build the adjective list
    // args: adjective array
    function build(arr2) {
for (i2=0; i2<arr2.length; i2++) {
    var item2 = "<li class='adj2'>";
    $(adjList2).append(item2 + arr2[i2] + "</li>");
}
    }
    // function to resize adjective list
    // args: adjective list item
    function resize(el2) {
$(adjList2).animate({
    width: $(el2).width(),
}, 200);
    }
    // function to add slide-in transition
    // args: element that needs to slide
    function slideIn2(el2) {
// duration slide is on screen
var hold2 = 1000;
// resize area to sliding element
resize($(el2));
// add slide-in class
$(el2).addClass('slide-in2');   
// after 'hold' duration slide-out current item
// then slide in next item
setTimeout(function(){
    // check to see if loop should continue
    if (stop === true) {
        stop = false;
        return;
    }
    // slide current element out
    slideOut2(el2);
    // slide in next element in queue
    slideIn2($(el2).next());
}, hold2);
    }
    // function to add slide-out transition
    // args: element that needs to slide
    function slideOut2(el2) {
// remove current class and add slide-out transition
$(el2).removeClass('slide-in2').addClass('slide-out2');
// wait for slide tramsition to finish then
// call 'change' function
setTimeout(function(){
    change();
}, 200);
    }
    // function to re-arrange adjective list
    function change() { 
// store last item index
var i2 = adjs2.length - 1;
// detach element that has slide-out class
// put to the bottom of the list after
// the last item
$('.adj2:eq(' + i2 + ')').after($('.slide-out2').detach());
// remove class to send element back to original position
$('.adj2').removeClass('slide-out2');
    }
    // build slider
    build(adjs2);
    // init loop
    slideIn2(getList2()[0]);