Only 1 radiobutton can be selected, rather than one from every group

Question

I'm implementing feedback on my website. As it is right now, the user is shown a group of sections, each containing a group of questions. Each question has 5 possible answers in the form of radiobuttons and every question has the same list of possible answers.

Everything is drawn as I want it, but appearantly my page recognizes every radiobutton on it as part of the same question which results in only 1 selectable radiobutton on the entire page.

This is my code used to generate the page:

<div class="centered feedbackwrapper ">
    @using (Html.BeginForm("SaveFeedback", "Leertraject")) {

        <h3>Feedback voor leertraject @Model.LeertrajectCode</h3>

        foreach (var section in Model.Sections) {
        <div class="feedbackonderdeel  well">
            <h4>@section.Name</h4>
            @foreach (var question in section.Questions) {
                <div class="feedback ">
                    <p class="feedbackvraag">@question.Question
                        <br />
                        @{
                        var choices = (IList<FeedbackChoiceViewModel>) Session["Choices"];
                        }

                        @foreach (var choice in choices) {
                            <span class="feedbackkeuze">
                                @Html.RadioButtonFor(x => choice.ChoiceID, @choice.ChoiceID, new {@id = @question.QuestionID})
                                @choice.Choice
                            </span>
                        }
                    </p>
                </div>
            }
        </div>
        }

        <input type="submit" class="btn btn-info" value="@Strings.SaveFeedback" />
    }
</div>

The generated view:

And the generated source code:

<div class="feedback ">
                    <p class="feedbackvraag">Vraag 1
                        <br />


                            <span class="feedbackkeuze">
                                <input checked="checked" id="1" name="keuze.KeuzeID" type="radio" value="1" />
                                OV
                            </span>
                            <span class="feedbackkeuze">
                                <input checked="checked" id="1" name="keuze.KeuzeID" type="radio" value="2" />
                                V
                            </span>
                            <span class="feedbackkeuze">
                                <input checked="checked" id="1" name="keuze.KeuzeID" type="radio" value="3" />
                                G
                            </span>
                            <span class="feedbackkeuze">
                                <input checked="checked" id="1" name="keuze.KeuzeID" type="radio" value="4" />
                                ZG
                            </span>
                            <span class="feedbackkeuze">
                                <input checked="checked" id="1" name="keuze.KeuzeID" type="radio" value="5" />
                                NVT
                            </span>
                    </p>
                </div>
                <div class="feedback ">
                    <p class="feedbackvraag">Vraag 2
                        <br />


                            <span class="feedbackkeuze">
                                <input checked="checked" id="2" name="keuze.KeuzeID" type="radio" value="1" />
                                OV
                            </span>
                            <span class="feedbackkeuze">
                                <input checked="checked" id="2" name="keuze.KeuzeID" type="radio" value="2" />
                                V
                            </span>
                            <span class="feedbackkeuze">
                                <input checked="checked" id="2" name="keuze.KeuzeID" type="radio" value="3" />
                                G
                            </span>
                            <span class="feedbackkeuze">
                                <input checked="checked" id="2" name="keuze.KeuzeID" type="radio" value="4" />
                                ZG
                            </span>
                            <span class="feedbackkeuze">
                                <input checked="checked" id="2" name="keuze.KeuzeID" type="radio" value="5" />
                                NVT
                            </span>
                    </p>
                </div>

Considering each set of answers to a question has the same ID, I would've expected them to be grouped rather than every radiobutton on the page. Why is it treating every radiobutton as one group, rather than looking at the ID to determine which belong together?

Answer 1

Each group must have a distinct name instead of an id. You should never have matching ids on a page.