jquery - 複数のラジオ セットから動的な JQuery ボタンセットを作成する

Question

私は非常に単純なものを作成しようとしています。SQL から渡されたクエリに基づいて動的な「はい」/「いいえ」の質問を作成し、10 ～ 20 の質問を返すコードがあります。

使用しようとしましJQuery Buttonset()たが、動的 div で動作させることができません。せいぜい最初のセットで動作させることができ、その後はすべて失敗します。

シンプルなボタンを作成するために SPAN 要素を使用することにしましたが、yes と no が同時に選択されているかどうかを確認する際に問題が発生します。それぞれは現在次のように作成されています。

$.ajax({
    url: 'getQuestions.asp',
    dataType: "json",
    data: { area: area },
    success: function (data) {
        $('#output').html('<div class="center" id="date">'+name+' - Audit Area is '+area+'</div><div class="table"><div id="radio">')
        var len = data.length;
        for (var i = 0; i< len; i++) {
            $('#output').append('<div class="tr"><div class="col1">Q'+data[i].Qno+'.</div><div class="col2">'+data[i].Question+'</div><div class="col3"><span class="button" data-val="yes" name="Q'+data[i].Qno+'">&#10004;</span>&nbsp;&nbsp;<span class="button" data-val="no" name="Q'+data[i].Qno+'">&#10008;</span></div></div>')
        }
        noQuestions = i;
        $('#output').append('</div><div class="center" id="date"><div class="button wide" id="finish">Finish Audit</div></div>')
        $('.col2').each(function(){
            $(this).parent().find('.col1, .col3').height($(this).height())
        });
        $('#output').append('</div>')
    }
}); 

ボタンは長い追加行で作成されます。これは、nameおよびdata-val属性で独自のものにしました。

の ID で DIV を作成すると#radio、それを使用すると最初の要素$( "#radio" ).buttonset();にのみ影響します。#radioはい/いいえの質問の動的なセットでこれをどのように達成しますか?