Cost Calculator giving wrong calculations - slider

Question

I'm trying to create a cost calculator with 1 dropdown and 2 sliders. Within each choice in the dropdown, it contains 2 different price for each sliders. Both the cost of these 2 sliders add up would give the total cost.
Here is the problem, the cost output is wrong. The output numbers from 2 sliders doesn't add up to the right result. Can anyone help me with this?
Codepen
<style>
.bubble {
background: red;
color: white;
padding: 4px 12px;
position: absolute;
border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
.bubble::after {
content: "";
position: absolute;
width: 2px;
height: 2px;
background: red;
top: -1px;
left: 50%;
}
.range-wrap {
position: relative;
margin: 0 auto 3rem;
}
.range {
width: 100%;
}
</style>
<h1>WhatsApp Messaging Cost Calculator</h1>
<!-- Dropdown fields for selecting the message type and network provider -->
<label for="message-type">Country:</label>
<select id="message-type" onchange="calculateCost()">
<option value="text" data="text">US</option>
<option value="image" data="image">UK</option>
<option value="audio" data="audio">Europe</option>
</select>
<br>
<!-- Number sliders for selecting the number of messages and size of the message (in KB) -->
<div class="range-wrap">
<label for="num-messages">User-initiated conversation rate:</label>
<input type="range" class="range" min="500" max="10000" value="0" step="10" id="num-messages" oninput="calculateCost(this.value)">
<output class="bubble"></output>
<p>Total Cost: $<span id="output2">0.00</span></p>
</div>
<br>
<div class="range-wrap">
<label for="message-size">Business-initiated conversation rate:</label>
<input type="range" class="range" min="500" max="10000" value="0" step="10" id="message-size" oninput="calculateCost2(this.value)">
<output class="bubble"></output>
<p>Total Cost: $<span id="output3">0.00</span></p>
</div>
<br>
<!-- Live output field for displaying the total cost of the WhatsApp messages -->
<p>Total Cost: $<span id="cost">0.00</span></p>
<script>
function calculateCost(value) {
// Get the selected values from the dropdown fields and number sliders
var messageType = (document.getElementById("message-type").value);
var numMessages = (document.getElementById("num-messages").value);
var messageSize = (document.getElementById("message-size").value);
// Set the base cost based on the message type
var baseCost = 0;
if (messageType == "text") {
baseCost = 0.0088;
baseCost2 = 0.0044;
} else if (messageType == "image") {
baseCost = 0.0388;
baseCost2 = 0.00194;
} else if (messageType == "audio") {
baseCost = 0.022;
baseCost2 = 0.011;
}
numMessages = parseInt(numMessages);
messageSize = parseInt(messageSize);
// Calculate the total cost based on the base cost, number of messages, and message size
var messages = numMessages * baseCost;
var messages2 = messageSize * baseCost2;
var totalCost = messages + messages2;
// Update the live output field with the total cost
document.getElementById("cost").innerHTML = totalCost.toFixed(2);
// Update the output2 element with a different calculation
document.getElementById("output2").innerHTML = value * baseCost;
}
function calculateCost2(value) {
// Get the selected values from the dropdown fields and number sliders
var messageType = (document.getElementById("message-type").value);
var numMessages = (document.getElementById("num-messages").value);
var messageSize = (document.getElementById("message-size").value);
// Set the base cost based on the message type
var baseCost = 0;
if (messageType == "text") {
baseCost = 0.0088;
baseCost2 = 0.0044;
} else if (messageType == "image") {
baseCost = 0.0388;
baseCost2 = 0.00194;
} else if (messageType == "audio") {
baseCost = 0.022;
baseCost2 = 0.011;
}
numMessages = parseInt(numMessages);
messageSize = parseInt(messageSize);
// Calculate the total cost based on the base cost, number of messages, and message size
var messages = numMessages * baseCost;
var messages2 = messageSize * baseCost2;
var totalCost = messages + messages2;
// Update the live output field with the total cost
document.getElementById("cost").innerHTML = totalCost.toFixed(2);
// Update the output2 element with a different calculation
document.getElementById("output3").innerHTML = value * baseCost;
}
function calculateCost3(value) {
// Get the selected values from the dropdown fields and number sliders
var messageType = (document.getElementById("message-type").value);
var numMessages = (document.getElementById("num-messages").value);
var messageSize = (document.getElementById("message-size").value);
// Set the base cost based on the message type
var baseCost = 0;
if (messageType == "text") {
baseCost = 0.0088;
baseCost2 = 0.0044;
} else if (messageType == "image") {
baseCost = 0.0388;
baseCost2 = 0.00194;
} else if (messageType == "audio") {
baseCost = 0.022;
baseCost2 = 0.011;
}
numMessages = parseInt(numMessages);
messageSize = parseInt(messageSize);
// Calculate the total cost based on the base cost, number of messages, and message size
var totalCost = calculateCost + calculateCost2;
// Update the live output field with the total cost
document.getElementById("cost").innerHTML = totalCost.toFixed(2);
}
</script>
<script>
const allRanges = document.querySelectorAll(".range-wrap");
allRanges.forEach(wrap => {
const range = wrap.querySelector(".range");
const bubble = wrap.querySelector(".bubble");
range.addEventListener("input", () => {
setBubble(range, bubble);
});
setBubble(range, bubble);
});
function setBubble(range, bubble) {
const val = range.value;
const min = range.min ? range.min : 0;
const max = range.max ? range.max : 100;
const newVal = Number(((val - min) * 100) / (max - min));
bubble.innerHTML = val;
// Sorta magic numbers based on size of the native UI thumb
bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
}
</script>