Iterating through hidden inputs

I have a long list of checkboxes. What I need is that when someone checks a checkbox (it has a class of 'compare'), I need to populate one of 4 hidden form inputs. The idea is to compare up to four products (the ones they select via checkbox), and when the press the "Compare" button, it will send the values of the hidden inputs to a page which I can then use to query a database.

The problem I am having is using jQuery to populate the hidden form fields, but if the user unchecks a checkbox, to remove that item from the hidden input and make it available to potentially hold another value.

<input type="hidden" class="comp" name="compare_0" id="compare_0"/>
<input type="hidden" class="comp" name="compare_1" id="compare_1"/>
<input type="hidden" class="comp" name="compare_2" id="compare_2"/>
<input type="hidden" class="comp" name="compare_3" id="compare_3"/>

And the product checkboxes are like the following, with a refid containing the product ID that I need to populate the hidden fields with:

<input type="checkbox" class="compare" refid="productIDvalue"/>
<input type="checkbox" class="compare" refid="16809"/>
<input type="checkbox" class="compare" refid="27091"/>
<input type="checkbox" class="compare" refid="W3490"/>
<input type="checkbox" class="compare" refid="ST089"/>

So when an item is checked, it would then populate an open hidden form with the value of the productID:

<input type="hidden" class="comp" name="compare_0" id="compare_0" value="ST089"/>

Here is the mangled code:

$('.compare input').each(function() {
    $(this).click(function(){
        var me = $(this).attr("refid");
        var img = $(this).attr("imgloc"); 
        //populates a tray containing product images
        $(".compareTray ul li:not(:has(>img))").first().append('<img src="' + img + '" alt="' + me + '" height="28" width="28" />');
        //mangled portion
        $(".comp:not([value])").value(me);
    });
})

ANY assistance would be greatly appreciated.