javascript - ボタンを押したときに無限スクロールパスを追加する

Question

誰かが私を助けてくれることを願っています。新しいトラックが追加される限り、ダウンする必要があるジェットコースターの乗り物を作成しようとしています。上部にボタンを追加しました。これには 2 つのパスがあります。これらのパスは、一度に 1 つずつ生成する必要がありますが、互いに下になります。これまでの私のコード:

$(window).load(function(){
     $(document).ready();
            function pathOne(){
                var roadDiv = document.createElement("div");
                var roadImage = document.createElement("div");

                roadDiv.className = "road1";

                roadImage.className = "roadImage1"

                $('.wrapper').append(roadDiv);
                $(roadDiv).append(roadImage);

                $.fn.scrollPath("getPath")
                .moveTo(340, 50, {})
                .lineTo(340, 300, {rotate: .1})
                .lineTo(340, 300, {rotate: .7})
                .lineTo(620, 600, {})
                .rotate(0, {})
                .lineTo(620, 820, {})
                .rotate(- .8, {})
                .lineTo(160, 1280, {})
                .rotate(0, {})
                .lineTo(160, 1484, {})
            }

            function pathTwo(){
                var roadDiv = document.createElement("div");

                var roadImage = document.createElement("div");

                roadDiv.className = "road2";
                roadImage.className = "roadImage2"

                $('.wrapper').append(roadDiv);
                $(roadDiv).append(roadImage);

                $.fn.scrollPath("getPath")
                //.moveTo(160, 1580, {})
                .lineTo(160, 1580, {})
                .rotate(-.8, {})
                .lineTo(-80, 1820, {})
                .rotate(0, {})
                .lineTo(-80, 2190, {})
                .rotate(.8, {})
                .lineTo(180, 2460, {})
                .rotate(0, {})
                .lineTo(180, 2680, {})
                .rotate(-.8, {})
                .lineTo(50, 2820, {})
                .rotate(0, {})
                .lineTo(50, 2918, {})
            }

            $(".addRow").click(function(){

                if ($(".wrapper").is(':empty')) {
                    pathOne();
                    //alert("added pathOne");
                }
                else if ( $('.road1').length > 0 ){
                    pathTwo();
                    alert("added pathTwo");
                    return;
                }
                $(".wrapper").scrollPath({drawPath: false, wrapAround: false, scrollBar: true});
            });

            function ordinal(num) {
                return num + (
                    (num % 10 == 1 && num % 100 != 11) ? 'st' :
                    (num % 10 == 2 && num % 100 != 12) ? 'nd' :
                    (num % 10 == 3 && num % 100 != 13) ? 'rd' : 'th'
                );
            }
    });

デモはここで見ることができます: ローラーコースター トラック

私の問題は、新しいトラックを追加すると、ほとんどの場合、他のトラックの下に追加され、トラック 1 (pathOne) とトラック 2 (pathTwo) が切り替わることです。トラック 1 から始めて、ボタンを押すとトラック 2 が追加され、もう一度押すとトラック 2 の下にトラック 1 が追加されます。

どんな助けも甘いでしょう:)

私はここからプラグインを使用しています