Untitled

const total = document.querySelectorAll(".tot")
const price = document.querySelectorAll(".cost");
let textval = document.querySelectorAll('.qty-item');
const cal = document.getElementById("calc");
const errorMessage = document.querySelectorAll('.error');

cal.addEventListener('mouseover',function(e){
console.log(total);
for (var i = 0; i < price.length; i++) {
let xPrice =price[i].innerHTML.split("$");
let parsePrice = parseFloat(xPrice[1]);
if(textval[i].value==="" || isNaN(textval[i].value)){

setMessage("Please enter a number",'red');

}else {
let x = parseFloat(textval[i].value);
let y =parsePrice;

let z = x * y;

  total[i].innerText = z.toFixed(2);


        total[i].innerText = z;

        for (i=0;i < total.length; i++){
        let j = parseFloat(total[i].innerHTML);

        console.log(j);

        }
 }
 }
 });

<body>
<div class="main">
<span class="title">A Title</span>
</div>
<div class="content">
<div class="item">
  <span>Item 1</span>
</div>
<div>
  <span class="cost">$100.00</span>
</div>
<div id="qty">
  <label>QTY:</label><input placeholder="0" class="qty-item">
  <p class="error"></p>
</div>
<div class="tot">
  <span><label>TOTAL</label> $0.0</span>
</div>
</div>
<br><br>
<div class="main">
 <span class="title">A Title</span>
</div>
<div class="content">
 <div class="item">
  <span>Item 2</span>
</div>
<div>
  <span class="cost">$50.00</span>
</div>
<div class="qty">
  <label>QTY:</label><input placeholder="0" class="qty-item">
  <p class="error"></p>
</div>
<div class="tot">
  <span><label>TOTAL</label> $0.0</span>
</div>
</div>

<div class="calc-button">
<button id="calc">Calculate Prices</button>
</div>

</body>