JSFiddle - React, Tailwind, and code Playground
HTML
<div class="cart">
<input type="text" class="amount-one" value="0">
<input type="text" class="amount-two" value="0">
<input type="text" class="amount-three" value='0'>
<button>click</button>
</div>
<div class="cart">
<input type="text" class="amount-one" value="0">
<input type="text" class="amount-two" value="0">
<input type="text" class="amount-three" value='0'>
<button>click</button>
</div>
<div class="info"></div>
CSS
input {
display: block;
}
JavaScript
const currentTariff = JSON.parse(localStorage.getItem("cabins") || "[]");
const btn = document.querySelectorAll('button')
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);
const obj = {
countOne: countOne,
countTwo: countTwo,
countThree: countThree,
accommodation: parseInt(accommodationPass),
}
const passengersMax = 2; //максимальное количество пассажиров
let accommodationSum; //глобальная переменная суммы количества для условия
if (obj.accommodation > passengersMax) {
alert(false)
} else if (obj.accommodation > passengersMax ||
accommodationSum > passengersMax) {
alert(false)
} else if (accommodationSum > passengersMax) {
alert(false)
} else {
currentTariff.push(obj);
updateState()
render([obj]);
}
accommodationSum = currentTariff.reduce( //подсчет количества
(acc, curr) => acc + curr.accommodation,
0
);
console.log(accommodationSum)
})
function updateState() {
localStorage.setItem("cabins", JSON.stringify(currentTariff));
}
})