Calcualte for hidden field value instead of checkbox

I have a jquery script that calcuates the value (price of item) of the checkbox everytime it is checked. I wanted to use the checkbox value as the item name instead and use a hidden field to get the value. Is there a way for me to attach a hidden field to a corresponding checkbox and calculate the value of the hidden field instead?

Here's a fiidle of what i want to happen

Here's my jquery

   function total(frm) 
{
    var tot = 0;
    for (var i = 0; i < frm.elements.length; i++) {
        if (frm.elements[i].type == "checkbox") {
            if (frm.elements[i].checked) tot += 
                Number(frm.elements[i].value) * Number(frm.elements[i+1].value);
        }
    }
    document.getElementById("totalDiv").firstChild.data = "PHP" + tot;
}

and my HTML

<li>
<label>        
  <input type="checkbox" name="drink[]" value="DrinkName1" onclick="total(this.form);"/>
 Sample Item
  <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" onclick="total(this.form);"/>
  <input type="hidden" name="drinkprice" value="12">
</label>
</li>

<li>
<label>        
  <input type="checkbox" name="drink[]" value="DrinkName2" onclick="total(this.form);"/>
 Sample Item
  <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" onclick="total(this.form);"/>
  <input type="hidden" name="drinkprice" value="6">
</label>
</li>

<li>
<label>        
  <input type="checkbox" name="drink[]" value="DrinkName3" onclick="total(this.form);"/>
 Sample Item
  <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" onclick="total(this.form);"/>
  <input type="hidden" name="drinkprice" value="4">
</label>
</li>



 <p>Total</p><div id="totalDiv">0</div>