How to tie prices to individual form times?

I'm making a food ordering form wherein the user can select multiple food items, and then the quanitity of each individual item.

The way I'm tackling this is by creating an accordion with multiple checkboxes and adding a quantity field to each checkbox (which shows up when the checkbox is checked). So far, I've only been able to fetch the name of the item and quantity. Here's how the code for the checkboxes looks like right now:

<!-- Option1 -->
<div class="form-row">
  <div class="form-group col-md-8">
    <div class="form-check">
      <input class="form-check-input showman" type="checkbox" name="items[1][chosen]" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
      <label class="form-check-label" for="c1">
        Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
      </label>
    </div>
  </div>
    <div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
      <!-- <label for="qtcounter">Quantity:</label> -->
      <div class="input-group" id="qtcounter">
        <input type="button" value="-" class="button-minus" data-field="items[1][quantity]">
        <input type="number" step="1" max="" value="1" name="items[1][quantity]" class="quantity-field">
        <input type="button" value="+" class="button-plus" data-field="items[1][quantity]">
      </div>
    </div>
</div>
<!-- Option 1 ends -->

As you can see, I'm using associative arrays to read both the name and the quantity. The problem is, I also need to (dynamically) calculate the order total. That would mean attaching a numeric value(the price) to each checkbox but the checkbox value is already set to the name of the item.

Is there any way I can work around this? I need to show the total right before the submit button, on an order review page that'll come up after submitting the form and I'll need to save this value in a database along with the other form details, of course.