Howtoget the unique id of a select option for a dynamically generated select options

When I select an option from the dropdown, the id is not passed from the database table to the form. I want to implement a cart system in laravel where any single selection will be passed as an object to the cart before I finally save it to the order table in the database. So far the selection, and calculation of total price based on quantity works but the only unit cost being loaded is the most recent database entry. Because of this no matter the selection from the select options, the total cost (result) is always calculated based on the last database entry.

please this is my blade code

<div class="modal-content" style="display: flex">
  <input type="hidden" value="{{$food->unit_cost}}" id="{{$food->food_name}}">
  <input type="number" placeholder="quantity" id="n2" min="1" /><br/><br/>

  <div id="mother">
    <button id="add" value="+" onclick="add()">Add</button>
  </div>

  <input type="hidden" name="" id="result" />
  <h3>total:</h3>
  <div style="display: flex">
    <h3 id="results"></h3>
    <h3>Gh₵</h3>
  </div>
</div>

and this is the script that performs the calculations

<script>
function add() {

  var n1 = parseInt(document.getElementById('{{$food->food_name}}').value);

  var n2 = parseInt(document.getElementById('n2').value);

  var add = document.getElementById('add').value;

  if (add === '+') {
    document.getElementById('result').value = n1 * n2;

    document.getElementById('results').innerHTML = n1 * n2;
  }

}
</script>