<html>
<input data-required="" id="number" autocomplete="off" type="text" min="0" max="50" name="text" value="1" placeholder="1" class="input input-calc" data-placeholder="1">
<span class="it-price-students-small">1000</span>
<span class="it-price-students-weekend">1000</span>

<div class="form-popup__total-new-price">0</div>
  
</html>
.it-price-students-weekend{
  display:none;
}
.form-popup__total-new-price{
  color:red;
  margin: 40px 0px 0px 0px;
}

const inputNumberStudents = document.querySelector("#number");

const numberStudentsPrice = document.querySelector(".it-price-students-small");

const totalPrice = document.querySelector(".form-popup__total-new-price");

const numberStudentsPriceWeekend = document.querySelector(
  ".it-price-students-weekend"
);

inputNumberStudents.addEventListener("input", function (e) {
  if (inputNumberStudents.value <= 17) {
  const totalWeekend =
    +numberStudentsPrice.innerHTML + +numberStudentsPriceWeekend.innerHTML;
  numberStudentsPrice.innerHTML = totalWeekend;
    totalPrice.innerText = totalWeekend * inputNumberStudents.value;
  }
  else{
    const totalWeekend_2 =
    +numberStudentsPrice.innerHTML - +numberStudentsPriceWeekend.innerHTML;
  numberStudentsPrice.innerHTML = totalWeekend_2;
    totalPrice.innerText = totalWeekend_2 * inputNumberStudents.value;
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.