jquery - jQuery モバイル: ラジオ ボタンが期待どおりに機能しない

Question

コードに何か問題があり、それが何であるかわかりません。jQuery モバイルを使用してラジオ ボタン フォームを生成しています。ただし、期待どおりに機能していません。このように表示されます (画像リンク: http://tinypic.com/r/4q0os8/5 ) が、すべてのラジオ ボタンが下に表示されます。

生成された HTML:

 <div data-role="content">
                <h3>
                    Answer This Question
                </h3>
                <form action="storeresponse.php" method="GET" ajax-data="false">
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup" data-type="vertical">
                            <legend>
                                What is your favorite food?                            </legend>

                                <input id="radio1" value="" name="option" data-theme="c" type="radio">
                                <label for="radio1">Pizza</label>

                                <input id="radio1" value="" name="option" data-theme="c" type="radio">
                                <label for="radio1">Pasta</label>

                                <input id="radio1" value="" name="option" data-theme="c" type="radio">
                                <label for="radio1">Chicken wings</label>

                                <input id="radio1" value="" name="option" data-theme="c" type="radio">
                                <label for="radio1">Noodles</label>
                                                        </fieldset>
                        <input type="submit" data-theme="b" data-icon="check" data-iconpos="right"
                               value="Submit">
                    </div>

                </form>

追加している間、ラジオボタンごとに同じIDを生成しています$i++