Итерация по скрытым вводам

Question

У меня есть длинный список флажков. Что мне нужно, так это то, что когда кто-то проверяет флажок (у него есть класс "сравнить"), мне нужно заполнить один из 4 входов скрытой формы. Идея состоит в том, чтобы сравнить до четырех продуктов (те, которые они выбирают с помощью флажка), и при нажатии кнопки "Сравнить" он отправит значения скрытых входных данных на страницу, которую я затем смогу использовать для запроса к базе данных.

У меня проблема с использованием jQuery для заполнения скрытых полей формы, но если пользователь снимает флажок, чтобы удалить этот элемент из скрытого ввода и сделать его доступным для хранения другого значения.

<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"/>

И флажки продукта похожи на следующие, с refid, содержащим идентификатор продукта, который мне нужен для заполнения скрытых полей:

<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"/>

Поэтому, когда элемент проверяется, он затем заполняет открытую скрытую форму значением productID:

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

Вот искаженный код:

$('.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);
    });
})

Будем очень благодарны любой помощи.