Custom code - Issue with airbnb alike price calculation

Hi fellow developpers,

I am struggling with a piece of custom code from the following template: Template Price Calculator - Airbnb Model - Free to Clone - Webflow

The goal is to calculate the number of nights between two dates and then multiply it with a price. The whole calculation should be triggered as soon as two dates are selected

I switched out the date picker to the one from flatpickr, however I cannot get it to work, I think it is connected with the trigger not working properly and unfortunately I do not fully understand this part of the code so I do not know how to adjust it.

Example:

date-1: 19.11.2022
date-2: 20.11.2022
Price = 50

nights = 1

Price * nights = 50

fee = 0.1 * 50 = 5

Total 55

Header:

<script>

var Webflow = Webflow || [];
Webflow.push(function () {
	document.getElementsByClassName('date').flatpickr({
  	enableTime: false,
    dateFormat: "d.m.Y",
    // This outputs in the format of Month Day, Year HH:MM
    // There are a LOT of ways to format and it's super easy to swap. 
    // See here: https://flatpickr.js.org/formatting/
  });
});

</script>

<script>

var Webflow = Webflow || [];
Webflow.push(function () {
	document.getElementsByClassName('time').flatpickr({
  	enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    // This outputs in the format of Month Day, Year HH:MM
    // There are a LOT of ways to format and it's super easy to swap. 
    // See here: https://flatpickr.js.org/formatting/
  });
});


</script>

Body:

<script>
document.addEventListener('DOMContentLoaded', () => {
 document.querySelectorAll('.estimator_close-dropdown').forEach(trigger => {
  trigger.addEventListener('click', function(){ 
    document.querySelectorAll('.estimator_people-dropdow-toggle.w-dropdown-toggle.w--open').forEach(target => target.classList.remove('w--open'));
    document.querySelectorAll('.estimator_people-dropdown-list.w-dropdown-list.w--open').forEach(target => target.classList.remove('w--open')); 
    });
 });
 });
</script>

<script>
var day1, day2, Arrival, Departure, Days, Price, Subtotal, Services, Total;

Price = 0;
Subtotal = 0;
Services = 0;
Total = 0;

function Calculation() {

Price = '{{wf {&quot;path&quot;:&quot;rate-for-overnight-dog-hosting&quot;,&quot;type&quot;:&quot;Number&quot;\} }}'
Subtotal = Price * Days

Services = Subtotal * 0.1

Total = Subtotal + Services


document.getElementById('price').innerHTML = Price;
document.getElementById('price-2').innerHTML = Price;
document.getElementById('services').innerHTML = Services;
document.getElementById('subtotal').innerHTML = Subtotal;
document.getElementById('total').innerHTML = Total;

  
   if (Days == 1 || 0 )
  {$("#night-plural").hide();}
  else
  {$("#night-plural").show();}

}

$('[name="Date-1"]').change(function (){
day1 = document.getElementById("date-1").value
Arrival = Date.parse(day1);
Days = Math.abs(Departure - Arrival)/(1000 * 3600 * 24);
document.getElementById('night').innerHTML = Days;
Calculation ();
 });
 
$('[name="Date-2"]').change(function (){
day2 = document.getElementById("date-2").value;
Departure = Date.parse(day2)
Days = Math.abs(Departure - Arrival)/(1000 * 3600 * 24)
;
document.getElementById('night').innerHTML = Days;
Calculation ();
 });

</script>

Would be grateful for any times or also other easier code snippets I can use!

Thank you very much!!

Happy weekend!

Here is my site Read-Only: [LINK]