for loop only changes first time

Question

i am trying to get my for loop to change all the choices but so they match up for some reason only the first one works

<form>
    <div id=q uestion>
        <ul class="question-list">

            <LH id=que>gfh</LH>

            <li id="choice-0">
                <input type="radio" name="radio" id="choice" data-price="100" value="product1" checked="checked">
                <label for="choice1"><span>question 1</span></label>
            </li>

            <li "choice-1">
                <input type="radio" name="radio" id="choice" data-price="110" value="choice2">
                <label for="choice2"><span>question 2 </span></label>
            </li>

            <li "choice-2">
                <input type="radio" name="radio" id="choice" data-price="110" value="product3">
                <label for="product3"><span>question 3 </span></label>
            </li>

            <li "choice-3">
                <input type="radio" name="radio" id="choice" data-price="110" value="product3">
                <label for="product3"><span>question 4 </span></label>
            </li>
        </ul>
        <input type="button" id="jqtest" value="next" onclick=n extQuestion_onclick>
    </div>
</form> 

here are the choices

var allQuestions = [{question: "Who is Prime Minister of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer:0}];

here is the function that doesn't work.

$(document).ready(function() {
    var currentChoise;
    var changeChoice;
    for (currentChoise = 0; currentChoise < allQuestions[0].choices.length; currentChoise++) {

        $('#que').text(allQuestions[0].question);
        $('#choice-' + currentChoise + ' span').text(allQuestions[0].choices[currentChoise]);
    };
});

here is js fiddle http://jsfiddle.net/4ee1552c/

Answer 1

Couple of things here:

• you have repeating id's on your inputs. ID's are always unique. No discussion on that.

• You are missing the id="" attribute on all li's except the first.

• <label for=""> works for the unique id="" attribute, not the inputs value=""

You want something like:

 <input type="radio" name="product3" id="product3" data-price="110" value="Tony Blair" />
 <label for="product3">question 3</label>

check the updated fiddle.