Why aren't my values being populated in the page?

I want to create a medications calculator. I need to be able to calculate the volume needed from the dose prescribed and the medication strength (eg, mg/ml).

So far this is what I have found but it does not output to the span element any values from the calculation:

The idea is that the result from here is dynamically generated and populated in the span below.

var req_dose = 0;
var med_dose = 0;

$("#required_dose").change(function() {
  req_dose = $("#required_dose").val();
  calcTotals();
});
$("#medication_dose").change(function() {
  med_dose = $("#medication_dose").val();
  calcTotals();
});
$("#medication_volume").change(function() {
  med_vol = $("#medication_volume").val();
  calcTotals();
});

function calcTotals() {
  $("#volume").text(req_dose * (med_vol / med_dose));

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="col-8 col-sm-12">
  <div class="alert alert-warning" role="alert">
    Claculator
    <input type="number" name="prescribed_dose">
    <input type="number" name="medication_dose">
    <input type="number" name="medication_volume"> Volume required: <span class="amount" id="volume" name="volume"></span>
  </div>

I've scoured and used the above script from an example posted here that made use of dropdowns which automatically generated a total when one was changed. Which is what im hoping for.

If at all possible I'd like to be able to populate (if requested by the user) the fields for medication dose and volume form a query with the php strings $med_vol and $med_dose.

While writing this post also attempted the following which dd not output anything:

<script type="text/javascript">
function price() {
    var reqdose = $("#required_dose").val();
    var meddose = $("#medication_dose").val(); 
    var result = 46.5 * _qtyoriginal; 
    result = req_dose * (med_vol / med_dose; 
    $("#volume").text(result);
}
</script>

Solution

Change Names to ID. $("#something") is and ID selector not a name selector.
I changed prescribed_dose to required_dose. Please double check if needed.
Wrap change listeners inisde $(document).ready() or use on("change",function(){}) to make sure they act live.
initiate med_vol=0

var req_dose = 0;
var med_dose = 0;
var med_vol=0;
$(document).ready(function(){
  $("#required_dose").change(function() {
    req_dose = $("#required_dose").val();
    calcTotals();
  });
  $("#medication_dose").change(function() {
    med_dose = $("#medication_dose").val();
    calcTotals();
  });
  $("#medication_volume").change(function() {
    med_vol = $("#medication_volume").val();
    calcTotals();
  });
})

function calcTotals() {
  $("#volume").text(req_dose * (med_vol / med_dose));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="col-8 col-sm-12">
  <div class="alert alert-warning" role="alert">
    Claculator
    <input type="number" id="required_dose">
    <input type="number" id="medication_dose">
    <input type="number" id="medication_volume">
    <br>
    Volume required: <span class="amount" id="volume" name="volume"></span>
  </div>