Показывать уникальный текст метки, когда каждый уникальный флажок установлен и показывать в другом месте на странице

Question

Хорошо, мне нужна помощь: у меня есть около 30 различных флажков, все с уникальными именами идентификаторов, но с одинаковым именем класса 'box'.

<form id="form1" method="get" action="/results.php">
<label>Chocolate</label> <input type="checkbox" name="opt1" value="Yes" id="box-4" class="box"/>
<label>Sugar</label><input type="checkbox" name="opt2" value="Yes" id="box-4" class="box"/>
<label>Tea</label> <input type="checkbox" name="opt3" value="Yes" id="box-4" class="box"/>
<label>Coffee</label> <input type="checkbox" name="opt4" value="Yes" id="box-4" class="box"/>
etc...
<input type="submit" value="Update Results" rel="nofollow" class="OpenFilter" id="OpenFilter"/>
</form>

Я ищу когда какой-либо из флажков установлен, они должны отображать содержимое своей метки в строке (например, кофе, сахар, чай). Я также использую следующий код для сохранения статуса флажка, поэтому, если возможно, я бы хотел, чтобы строка метки оставалась на месте на странице refre sh.

<script type = "text/javascript" > function onClickBox() {
var arr = $('.box').map(function() {
    return this.checked;
}).get();
localStorage.setItem("checked", JSON.stringify(arr));
}
$(document).ready(function() {
var arr = JSON.parse(localStorage.getItem('checked')) || [];
arr.forEach(function(checked, i) {
    $('.box').eq(i).prop('checked', checked);
});
$(".box").click(onClickBox);
}); </script>

Надеюсь, все мои рассуждения имеют смысл и кто-нибудь может помочь. Jason