Question

I am a novice learning jQuery and I have a scenario; I have a page where there are 3×3 sets of jQuery radio buttonsets. Each set of there is independent to make visible 9 different divs. Once selected swap a div on the page.

But whenever I add 3 forms on a page the output gets grouped. Means btn#1 of Frm#2 gets selected when I select btn#1 of Frm#1 and similarly for the others.

Here is the HTML

<div class="pkg_sldr_1" align="center">   
   <form name="form1">
    <div id="radioset1">
        <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Small</label>
        <input type="radio" id="radio2" name="radio"  /><label for="radio2">Medium</label>
        <input type="radio" id="radio3" name="radio" /><label for="radio3">Large</label>
    </div>
 </form>        
</div>

<div class="pkg_sldr_2" align="center">   
   <form name="form2">
    <div id="radioset2">
        <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Small</......

Here is the jQuery function

            <script>
            $(function() {
            $("#radioset1").buttonset();
            $("#radioset2").buttonset();
            $("#radioset3").buttonset();
            });
            </script>

The output is funny but not what I required…

Answer 1

You can’t have multiple elements with the same id on the same page.