How to update dynamic price based on quantity using vanilla JavaScript?

Question

I'm trying to update the price value based on the quantity count using javascript. I have hardcoded it and below is my code. I'm not sure how to update the price dynamically based on the quantity count. Can anyone please guide me?

For example when 77.89 X the count value is increased to 2 the actual result should be 155.78,

var count = 1;
var countprice = 100;
var countEl = document.getElementById("num-count");
const a = 2;
const x = countprice * a;
document.getElementById("priceValueCount").innerHTML = x;

function addCount() {
  if (count < 4) {
    count++;
    countEl.value = count;
  }
}

function minusCount() {
  if (count > 1) {
    count--;
    countEl.value = count;
  }
}

.num-minus,
.num-add {
  margin-top: 1px;
  display: inline-block;
  position: relative;
}

.num-minus:before,
.num-add:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  border-top: 2px solid #3A3E3D;
  margin-top: -1px;
}

.num-add::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  height: 10px;
  border-left: 2px solid #3A3E3D;
  margin-left: -1px;
}

<div class="price-value" id="priceExtra">$77.89</div>

<span class="num-minus" onclick="minusCount()"></span>
<input type="text" class="num-count" id="num-count" value="1" data-max="4" data-min="1">
<span class="num-add" onclick="addCount()"></span>


<div class="price-value" id="priceValueCount"></div>

Answer 1

var count = 1;
var countprice = 77.89;
var countEl = document.getElementById("num-count");
var priceEl = document.getElementById("priceValueCount");
priceEl.innerHTML = countprice;

function addCount() {
  if (count < 4) {
    count++;
    countEl.value = count;
    const a = countEl.value;
    const x = countprice * a;
    priceEl.innerHTML = x;
  }
}

function minusCount() {
  if (count > 1) {
    count--;
    countEl.value = count;
    const a = countEl.value;
    const x = countprice * a;
    document.getElementById("priceValueCount").innerHTML = x;
  }
}

.num-add, .num-minus {
  cursor: pointer;
}

<div class="price-value" id="priceExtra">$77.89</div>

<span class="num-minus" onclick="minusCount()">-</span>
<input type="text" class="num-count" id="num-count" value="1" data-max="4" data-min="1">
<span class="num-add" onclick="addCount()">+</span>


<div class="price-value" id="priceValueCount">0</div>