Still getting to grips with jQuery and I am pleased to have got as far as I have, especially help from the posts in this forum. However, now got to a working function that does what I want, that is to create a radio group that looks like a button. It pulls data via json and loops through creating the radio buttons.

I want to get the id of the radio buttons generated so that I can then parse through to the next step of the app but I can't get it to work.

function FillDiv(groups, side) {
    var cnt = 1;
    var newClass = '';
    var newType = '';
    if (side == '#ck-button-left') {
        newClass = 'leftClass';
        newType = 'radio'
    }
    else {
        newClass = 'rightClass';
        newType = 'checkbox'
    }

    $.each(groups, function (index, groups) {
        $(side)
        .append(
            $(document.createElement('label')).attr({
                id: cnt + 'lbl'
            })
        );
        $('#' + cnt + 'lbl')
        .append(
            $(document.createElement('input')).attr({
                id: groups.GroupCode,
                type: newType,
                name: 'testGroup',
                class: newClass
            })
        );
        $('#' + groups.GroupCode).after
        (
            $(document.createElement('span')).text(groups.GroupName).attr('class', 'leftSpan')
        );
        $('#' + cnt + 'lbl').after($(document.createElement('br')));
        cnt = cnt + 1;
    });
}

Looking through various searched, it should work with something like...

$('#leftSpan').mouseover(function () {
        $('#lblOutput').html(this.id);
});

or, as I suspect, it is something to do with the nesting of the label/input that I need to reference the parent or child.

Any pointers would be appreciated.