<h1 class="title">Booking</h1>
<form action="" method="post">
  <div class="header">
    <h2>Category</h2>
    <h2>Amount</h2>
    <h2>Price</h2>
</div>
  <div class="row">
    <label for="">1st Category</label>
    <div class="input__field">
      <button class="fa-solid fa-minus down"></button>
      <input type="number" value="0" min="0">
      <button class="fa-solid fa-plus up"></button>
    </div>
    <label class="price" for="">$300</label>
  </div>
   <div class="row">
    <label for="">2nd Category</label>
    <div class="input__field">
      <button class="fa-solid fa-minus down"></button>
      <input type="number" value="0" min="0">
      <button class="fa-solid fa-plus up"></button>
    </div>
    <label class="price" for="">$400</label>
  </div>
  <div class="row">
    <label for="">3rd Category</label>
    <div class="input__field">
      <button class="fa-solid fa-minus down"></button>
      <input type="number" value="0" min="0">
      <button class="fa-solid fa-plus up"></button>
    </div>
    <label class="price" for="">$500</label>
  </div>
  <div class="total">Total: $<span>0</span></div>
  <button class="submit" type="submit">Buy</button>
</form>

body {
  background: #88f1;
}

input[type=number]::-webkit-inner-spin-button {
  display: block;
  // -webkit-appearance: none;
  appearance: none;
}

.input__field button {
  box-shadow: -1px -1px 3px 0 #fff, 1px 1px 3px 0 #0003;
  // display:flex;
  // width: 10px;
  // justify-content: space-around;
}

body {
  height:100vh;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title {
  font-family: Lato;
  font-weight:900;
  font-size: 2rem;
  padding: 1rem;
}

.row {
  display:flex;
  justify-content: space-around;
  align-items: center;
}

.header {
  display:flex;
  justify-content: space-around;
}

.header h2 {
  font-weight: 400;
  padding: 0 0 1rem;
  color: #fff;
  text-shadow: 1px 1px 2px #0009, -1px -1px 2px #fff;
}

form {
  display: flex;
  flex-direction: column;
  font-family: Lato;
  width: 500px;
}

form input {
  background: #55f1;
  font-family: Lato;
  font-size: .8rem;
  outline: none;
  border: 1px solid #0003;
  border-radius: .5rem;
  padding: .3rem;
  // margin:.3rem;
  width:50px;
  text-align: center;
  box-shadow: -1px -1px 2px 0 #fff inset, 1px 1px 2px 0 #0002 inset;
}

label {
  width :100px;
  color: #333c;
}

.submit {
  font-size: .8rem;
  padding: .5rem 1rem;
  border: 1px solid #0003;
  border-radius: 0.5rem;
  background: lightblue;
}

.price {
  text-align: center;
}

.input__field button {
  padding: .35rem;
   // width: 20px;
   //  height:20px;
  background: none;
  border: 1px solid #0003;
  border-radius: 3rem;
font-family: Fontawesome;
  font-weight: 100;
  color: #0007;
}

.input__field button:hover {
  background: #f55;
  color:#000;
}

.total {
  margin:1rem 0;
}
.total span {
  color: #f55;
}

let btnUp = document.querySelectorAll(".up"),
    btnDown = document.querySelectorAll(".down"),
    input = document.querySelectorAll("input");

input.forEach(item => {
  item.addEventListener('keypress', function(e) {
    if(e.key === "Enter") {
      e.preventDefault();
      sum();
    }
  });
  item.addEventListener('blur', function(e) {
    item.value = item.value === '' ? 0 : item.value ;
    sum();
  });
});

btnDown.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault();
    if (item.parentNode.querySelector("input").value > "0") {
      item.nextElementSibling.stepDown();
    };
    sum();
  });
});

btnUp.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault();
    item.previousElementSibling.stepUp();
    sum();
  });
})

function sum() {
  let total = 0;
  let inputField = document.querySelectorAll(".row");
  inputField.forEach(item => {
  let value = item.querySelector("input").value;
  console.log(value);
  let price = item.querySelector(".price").innerText.replace('$','');
  total = total + value * price;
  document.querySelector('.total').children[0].innerHTML = total;
});  
}