Linked radio buttonsets not updating on second press

Question

I've run into a problem and have no idea how to solve it (and yes, I used the search function without the right result). Hope you can help. A simple example can be found in jsFiddle.

My setup consists of multiple buttonsets consisting of radio buttons. As soon as the user presses a value on one buttonset, the other buttonset should be updated to show the choice made by the user.

My problem is that the buttonset is updated the first time a user clicks a radiobutton (in jsFiddle example pressing 1 on either buttonset changes the other one). But the second click on the same element after switching the choice doesn't update it anymore (in jsFiddle example, clicking 1 -> 0 -> 1 will show the problem). I've used the Google Chrome developer function and found out that even though I refresh (either the button or the buttonset), as soon as an element is updated, the checked="checked" status remains. I've tried to solve this by keeping track of the previous clicked radiobutton and setting those to false (commented out in the jsFiddle example). That takes away the property, but then there is no visual update.

So any idea on how to solve this? Used library is just the jQuery one.

HTML:

<div id="two_buttonsets">
<div id="test1">
    <input type="radio" id="component_0_test_0" name="component_test_0" value="0" checked="checked" />
    <label for="component_0_test_0">0</label>
    <input type="radio" id="component_1_test_0" name="component_test_0" value="1" />
    <label for="component_1_test_0">1</label>
    <input type="radio" id="component_2_test_0" name="component_test_0" value="2" />
    <label for="component_2_test_0">2</label>
</div>
<div id="test2">
    <input type="radio" id="component_0_test_1" name="component_test_1" value="0" checked="checked" />
    <label for="component_0_test_1">0</label>
    <input type="radio" id="component_1_test_1" name="component_test_1" value="1" />
    <label for="component_1_test_1">1</label>
    <input type="radio" id="component_2_test_1" name="component_test_1" value="2" />
    <label for="component_2_test_1">2</label>
</div>

JS/jQuery:

jQuery(function () {
$('#test1').buttonset();
$('#test2').buttonset();

/*var previous_clicked = [];
 $( '#two_buttonsets div[id*="test"] input:checked' ).each(function(){
 previous_clicked.push($(this).attr('id'));  
 });*/

// Once an component button is clicked
$('div[id*="test"] input').click(function () {

    // Setting the previous clicked values to checked=false
    /*for(var previous=0;previous<previous_clicked.length;previous++){
    $( '#'+previous_clicked[previous] ).attr('checked',false);
    $( '#'+previous_clicked[previous] ).button('refresh');
    }
    previous_clicked = [];*/

    // Set all other buttonsets to the same value
    var button_id = $(this).attr('id');
    var to = button_id.lastIndexOf('_', button_id.lastIndexOf('_') - 1) + 1;
    var track_number = button_id.substring(0, to);

    // Change all check buttons
    $('div[id*="test"] input[id*="' + track_number + '"]').each(function () {
        $(this).attr('checked', true);
        // $(this).button('refresh'); // Also doesn't work
        //previous_clicked.push($(this).attr('id'));
    })

    $('#test1').buttonset('refresh');
    $('#test2').buttonset('refresh');
})
})

Answer 1

After getting annoyed with it and still some surfing of the internet, I found out what the problem was. Instead of using .attr I should have used .prop. Apparently I should spend some time on reading about the difference between .attr and .prop.