Посчитать общую сумму товаров?

Question

pro100blich @pro100blich

JavaScript

Посчитать общую сумму товаров?

Всем привет. Есть у каждого select своя сумма, нужно подсчитать общую сумму этих всех select. В Js новичок, пробовал взять все суммы которые получились и засунуть их в перемену, а потом приравнять к id общей суммы, но увы. И еще, когда выбираешь элемент, он блокируется, но а если случайно нажал, то нужно перезагружать страницу. Может можно сделать, так чтобы можно было очистить выбор каждого поля по о дельности.
Только что заметил, если убрать size, то все больше ничего не работает, почему так происходит?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
	<select id="goods" >
		<option value="-">--</option>
		<option value="203" data-id="1">молоко</option>
		<option value="30" data-id="2">ананас</option>
		<option value="40" data-id="3">яблоко</option>
	</select>
	<br>
	Сумма: <span id="summ">0</span> рублей<br>
	Было выбрано:<br>
	<span id="list"></span>
	<br><br>
	<select id="good">
		<option value="-">--</option>
		<option value="203" data-id="1">пп</option>
		<option value="30" data-id="2">ррр</option>
		<option value="40" data-id="3">яблокоrew</option>
	</select>
	<br>
	Сумма: <span id="summ_two">0</span> рублей<br>
	Было выбрано:<br>
	<span id="list_two"></span>
	<br><br>
	<select id="ool" >
		<option value="-">--</option>
		<option value="203" data-id="1">2око</option>
		<option value="30" data-id="2">2анас</option>
		<option value="40" data-id="3">2локо</option>
	</select>
	<br>
	Сумма: <span id="olo">0</span> рублей<br>
	Было выбрано:<br>
	<span id="list_olo"></span>
	<br><br>
	общая сумма: <span id="ob_summ">0</span> рублей
	<script src="index.js"></script>
</body>
</html>

window.onload = function(e){
//3 select
var option_ool = document.querySelectorAll("#ool option");
var list_olo = document.querySelector("#list_olo");
var olo = document.getElementById("olo");
var olo_elem = 0;
option_ool.forEach(function(postBox) {
     postBox.addEventListener('click', function() {
     list_olo.innerHTML += this.innerHTML+'<br>';
     this.classList.add("add_olo");
     olo_elem += parseInt(this.getAttribute('data-id'));
     olo.innerHTML = olo_elem;
     this.disabled = true;
    });
 })
//2 select
var option_good = document.querySelectorAll("#good option");
var list_two = document.querySelector("#list_two");
var summ_two = document.getElementById("summ_two");
var summ_two_elem = 0;
option_good.forEach(function(postBox) {
     postBox.addEventListener('click', function() {
     list_two.innerHTML += this.innerHTML+'<br>';
     this.classList.add("add_summ_two");
     summ_two_elem += parseInt(this.getAttribute('data-id'));
     summ_two.innerHTML = summ_two_elem;
     this.disabled = true;
	});
})
//1 select
var option = document.querySelectorAll("#goods option");
var list = document.querySelector("#list");
var summ = document.getElementById("summ");
var summa_elem = 0;
option.forEach(function(postBox) {
     postBox.addEventListener('click', function() {
     list.innerHTML += this.innerHTML+'<br>';
     this.classList.add("add_summa");
     summa_elem += parseInt(this.getAttribute('data-id'));
     summ.innerHTML = summa_elem;
     this.disabled = true;
   	});
})

}