Brendan Castaneda

<div class="container">
  <div class="cart">
    <input class="input amount-one" type="text" value="0" />
    <input class="input amount-two" type="text" value="0" />
    <input class="input amount-three" type="text" value="0" />
    <button class="btn">click</button>
  </div>
  <div class="cart">
    <input class="input amount-one" type="text" value="0" />
    <input class="input amount-two" type="text" value="0" />
    <input class="input amount-three" type="text" value="0" />
    <button class="btn">click</button>
  </div>
  <div class="box">
    <input id="clear" type="button" value="clear all" />
    <div class="info"></div>
  </div>
</div>

body {
  display: flex;
  justify-content: center;
  background-color: #1d1e22;
}
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.cart {
  display: flex;
  flex-direction: column;
  margin: 20px;
}
.input {
  padding-left: 20px;
  height: 20px;
  margin-bottom: 5px;
  font-size: 20px;
  border-radius: 10px;
}
.btn {
  height: 30px;
  font-size: 20px;
  border-radius: 10px;
}
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}
#clear {
  width: 100px;
  height: 40px;
  margin-bottom: 10px;
  font-size: 20px;
  border-radius: 10px;
}
.info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 30px;
  border: 2px solid #bbb;
  background-color: #fff;
}

let currentTariff = JSON.parse(localStorage.getItem('cabins') || '[]');
const passengersMax = 3; // Максимальное количество пассажиров
let accommodationSum = currentTariff.reduce((acc, curr) => acc + curr.accommodation, 0);
const btn = document.querySelectorAll('.btn');
const info = document.querySelector('.info');

// Вывести текущие тарифные данные в информационный блок
const render = (tariff = currentTariff) => {
  [...tariff].forEach(el => {
    info.insertAdjacentHTML('beforeend', `<div>${el.accommodation}</div>`);
  });
};
render();

btn.forEach(button => {
  button.addEventListener('click', function (e) {
    const cart = e.target.closest('.cart');
    const countOne = cart.querySelector('.amount-one').value;
    const countTwo = cart.querySelector('.amount-two').value;
    const countThree = cart.querySelector('.amount-three').value;
    const accommodationPass = parseInt(countOne) + parseInt(countTwo) + parseInt(countThree);

    if (accommodationSum + accommodationPass > passengersMax) {
      alert('В этом заказе вы превысили максимальное количество человек');
      return;
    }

    const obj = {
      countOne: countOne,
      countTwo: countTwo,
      countThree: countThree,
      accommodation: parseInt(accommodationPass),
    };

    // Обновляем текущий тариф и отображаем новые данные
    currentTariff.push(obj);
    updateState();

    const sum = currentTariff.reduce((acc, curr) => acc + curr.accommodation, 0);
    info.innerHTML = `<div>Общая сумма: ${sum}</div>`;

    accommodationSum = sum; // Устанавливаем сумму размещения на текущую сумму
  });

  function updateState() {
    localStorage.setItem('cabins', JSON.stringify(currentTariff));
  }
  // Очищаем входы и информационный блок при нажатии кнопки "clear all"
function clearData() {
    currentTariff.length = 0;
    localStorage.removeItem('cabins');
    info.innerHTML = '';
    const inputs = document.querySelectorAll('input[type="text"]');
    inputs.forEach(input => {
      input.value = 0;
    });
    accommodationSum = 0;  // Сбрасываем сумму размещения до 0
}

  const clearBtn = document.querySelector('input#clear');
  clearBtn.addEventListener('click', clearData);
});

$(".video-box-1").hover(function() {
    $(".photo-1").addClass("main-product__photo-off");
    $(".video-1").addClass("main-product__video-on");
}, function() {
    $(".photo-1").removeClass("main-product__photo-off");
    $(".video-1").removeClass("main-product__video-on");
});

.box {
    width: 3421px;
    transform: translate3d(0, 0, 0);
    animation: dReeeA 50s linear infinite;
}

@keyframes dReeeA {
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

<script type="text/javascript"> </script>
<script type="text/javascript">//</script>

Различные вещи могут вызывать изменения вычислительных значений свойств элемента.
К ним относятся: вставка и удаление элементов из дерева документа (которые изменяют, имеют ли эти элементы вычисленные значения и могут изменять стили других элементов посредством сопоставления селекторов), изменения в дереве документа (которые вызывают изменения в том, какие селекторы соответствуют элементам), изменения на таблицы стилей или атрибуты стилей и другие вещи.
Эта спецификация не определяет, когда вычисленные значения обновляются, кроме того, что реализации не должны использовать, представлять или отображать что-либо, являющееся результатом каскадирования CSS, вычисления значений и процесса наследования.

let msBtn = document.querySelector(".message-good-btn");
msBtn.onclick = function() {
    let off = document.querySelector(".message-good");
    off.classList.remove('ms-on');
};

$(function() {
    let msBtn = document.querySelector(".message-good-btn");
    msBtn.onclick = function() {
        let off = document.querySelector(".message-good");
        off.classList.remove('ms-on');
    };
});