Jquery slider - Show value from slider in several places on page

Question

I have a webpage where the user uses the slider to select quantity for the item he would like to buy.

Depending on quantity selected in the slider, a unqie div with the total price will show. Now i would like to add another div with the same id, in which i will show quantity + a "buy [quantity] now" button.

How can i make 2 divs with the same id show at the same time? I believe that's not possible - but maybe there is a work around? It doesn't need to be 2 divs, it can be "2 " or "1 and 1 " aswell.

So, to sum up. I would like to display the jquery slider value in several locations on the webpage. How can i do that?

Here is the slider i use: jsFiddle DEMO

Regards,
Tobias

Answer 1

You can not use two IDs, in order to achieve your goals you should use class.

Isted of

<div id="1" class="colors"...

use

<div id="1" class="colors v1"...

in this case v1 is your identification

And if you have two element with the same class with jquery you can use them like $('.v1').show()

According your code it seems like

 $('#range-start').change(function() {
        $('.colors').hide();
        $('.v' + $(this).val()).show(); //#-> .v
    });

And your divs must has class v1 ... v10

See here jsfiddle