jquery horizondal slider top and bottom issue in duplicating
<p>I am using a jquery slider for my website.It has a bottom sliding bar.I want to dupicate it to top .I done it using simple javascript.it works bur some issues can any one help me in doing this.I pasted my code below</p>

<pre><code>$(document).ready(function(){
    $("#myController").jFlow({
        slides: "#slides",
        controller: ".jFlowControl", // must be class, use . sign
        //controller: ".jFlowControl1", // must be class, use . sign
        sl`enter code here`ideWrapper : "#jFlowSlide", // must be id, use # sign
        selectedWrapper: "jFlowSelected",  // just pure text, no sign
        auto: true,     //auto change slide, default true
        width: "610px",
        height: "235px",
        duration: 400,
        prev: ".jFlowPrev", // must be class, use . sign
        next: ".jFlowNext" // must be class, use . sign
    });
});
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function(){
    $("#myController1").jFlow({
        slides: "#slides",
        controller: ".jFlowControl1", // must be class, use . sign
        //controller: ".jFlowControl1", // must be class, use . sign
        slideWrapper : "#jFlowSlide", // must be id, use # sign
        selectedWrapper: "jFlowSelected",  // just pure text, no sign
        auto: true,     //auto change slide, default true
        width: "610px",
        height: "235px",
        duration: 400,
        prev: ".jFlowPrev1", // must be class, use . sign
        next: ".jFlowNext1" // must be class, use . sign
    });
});
function select(i){

var id=i.innerHTML;
var id0=id+"*";
$('.jFlowControl1').css('backgroundColor','#C1D2DB');
$('.jFlowControl').css('backgroundColor','#C1D2DB');
var selected=document.getElementById(id);
var selected1=document.getElementById(id0);
selected.style.backgroundColor = "#748A96";
selected1.style.backgroundColor = "#748A96";
}


function sel(i){

var id0=i.innerHTML;
var id=id0+"*";
$('.jFlowControl').css('backgroundColor','#C1D2DB');
$('.jFlowControl1').css('backgroundColor','#C1D2DB');
var selected=document.getElementById(id);
var selected1=document.getElementById(id0);
selected.style.backgroundColor = "#748A96";
selected1.style.backgroundColor = "#748A96";
</code></pre>

<p>}</p>

<pre><code>&lt;div class="content_secondportion02"&gt;
&lt;div id="myController"&gt;
            &lt;span class="jFlowPrev"&gt;&lt;img src="images/lt_arrow.png"&gt;&lt;/span&gt;
            &lt;span class="jFlowControl" id="1*"  onclick="select(this)"&gt;1&lt;/span&gt;
            &lt;span class="jFlowControl" id="2*" onclick="select(this)"&gt;2&lt;/span&gt;
            &lt;span class="jFlowControl" id="3*" onclick="select(this)"&gt;3&lt;/span&gt;
            &lt;span class="jFlowControl" id="4*"  onclick="select(this)"&gt;4&lt;/span&gt;
            &lt;span class="jFlowControl" id="5*" onclick="select(this)"&gt;5&lt;/span&gt;
            &lt;span class="jFlowNext" onclick="sel_arrow('jFlowNext1')"&gt;&lt;img src="images/rt_arrow.png"&gt;&lt;/span&gt;
        &lt;/div&gt;

        &lt;div id="myController1"&gt;
          &lt;span class="jFlowPrev1"&gt;&lt;img src="images/lt_arrow.png"&gt;&lt;/span&gt;
          &lt;span class="jFlowControl1" id="1" onclick="sel(this)"&gt;1&lt;/span&gt;
          &lt;span class="jFlowControl1" id="2" onclick="sel(this)"&gt;2&lt;/span&gt;
          &lt;span class="jFlowControl1" id="3" onclick="sel(this)"&gt;3&lt;/span&gt;
          &lt;span class="jFlowControl1" id="4" onclick="sel(this)"&gt;4&lt;/span&gt;
          &lt;span class="jFlowControl1" id="5" onclick="sel(this)"&gt;5&lt;/span&gt;
          &lt;span class="jFlowNext1" id="jFlowNext1"&gt;&lt;img src="images/rt_arrow.png"&gt;&lt;/span&gt;
          &lt;/div&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
