Когда я выбираю в select 4, общая сумма переходит в 4, а когда выбираю 5, общая сумма переходит в + 5, но мне нужно +1(уникальный при загрузке)?

Для решения вашей задачи, у вас есть несколько вариантов. Давайте рассмотрим их подробнее.

1. Добавить опцию "1" в список выбора по умолчанию:

<select>
  <option selected value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  ...
</select>

Таким образом, при загрузке страницы, общая сумма будет установлена равной "1".

2. Использовать событие "change" для select элемента и обновлять общую сумму при выборе значения:

<select id="mySelect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  ...
</select>

<span id="total">1</span>

<script>
  var select = document.getElementById("mySelect");
  var total = document.getElementById("total");
  
  select.addEventListener("change", function() {
    total.innerText = parseInt(select.value) + 1;
  });
</script>

В этом случае, мы добавили обработчик события "change" к select элементу. Когда пользователь выбирает другое значение, общая сумма обновляется путем добавления выбранного значения к 1.

3. Использовать атрибут "data" для хранения и обновления значения общей суммы:

<select id="mySelect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  ...
</select>

<span id="total" data-value="1">1</span>

<script>
  var select = document.getElementById("mySelect");
  var total = document.getElementById("total");
  
  select.addEventListener("change", function() {
    total.innerText = parseInt(select.value) + parseInt(total.getAttribute("data-value"));
  });
</script>

В этом случае, мы добавили атрибут "data-value" к span элементу, чтобы хранить значение общей суммы. При выборе нового значения, мы обновляем общую сумму, добавляя выбранное значение к текущему значению, полученному из атрибута "data-value".

Выбор между этими вариантами зависит от ваших личных предпочтений и требований проекта.