JavaScript Booking Form

I am seeking help with a booking form.

I would like to accomplish 2 things.

  1. Have the “Number of Participants” calculate the price when the guests are selected and appear in “Total Price”

  2. Date Picker for “Choose a Date / Check In”

I think I can figure everything else out, I just need help with the javascript.

I really like these air bnb react dates sample, but I do not understand this method and do not know how to add the script to make it work.

Single Date Picker

Date Range Picker

Thank you all in advance for you help!

Here is the HTML code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Booking Form</title>
</head>

<body>

    <div>Price: $65 USD / person</div>
    <form action="" id="" method="post">
        <div style="margin-top:8px;margin-bottom:8px">
            <div style="margin-bottom:8px">
                <label>
                    <div>Number of Participants</div>
                </label>
            </div>
            <select id="" name="">
                <option value="1" selected="selected">1 guest</option>
                <option value="2">2 guests</option>
                <option value="3">3 guests</option>
                <option value="4">4 guests</option>
                <option value="5">5 guests</option>
                <option value="6">6 guests</option>
                <option value="7">7 guests</option>
                <option value="8">8 guests</option>
                <option value="9">9 guests</option>
                <option value="10">10 guests</option>
            </select>
        </div>
        <div style="margin-top:8px;margin-bottom:8px">
            <div style="margin-bottom:8px">
                <div>Choose a Date</div>
            </div>
            <input type="text" aria-label="Check In" id="startDate" name="startDate" value="" placeholder="Check In" autoComplete="off" />
        </div>
        <div style="margin-bottom:8px">
            <div style="margin-bottom:8px">
                <div>Choose a Time</div>
            </div>
            <select id="" name="">
                <option selected="" value="1">8 am</option>
                <option value="2">9 am</option>
                <option value="3">10 am</option>
                <option svalue="4">11 am</option>
                <option svalue="5">1 pm</option>
                <option value="6">2 pm</option>
                <option value="7">3 pm</option>
            </select>

        </div>
        <div style="margin-top:8px">
            <div>Total Price: $65 USD</div>

        </div>
        <div style="margin-top: 8px;">
            <button>Book Now</button>
        </div>
    </form>

</body>

</html>

Here is the link:

https://3b6aacfa-ff88-4086-a3bc-5a3b43c5941e.htmlpasta.com/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Booking Form</title>
</head>
<body>
  <div>Price: $65 USD / person</div>
    <form action="" id="" method="post">
        <div style="margin-top:8px;margin-bottom:8px">
            <div style="margin-bottom:8px">
                <label>
                    <div>Number of Participants</div>
                </label>
            </div>
            <select id="selection" onchange="total()" name="">
                <option value="1" selected="selected">1 guest</option>
                <option value="2">2 guests</option>
                <option value="3">3 guests</option>
                <option value="4">4 guests</option>
                <option value="5">5 guests</option>
                <option value="6">6 guests</option>
                <option value="7">7 guests</option>
                <option value="8">8 guests</option>
                <option value="9">9 guests</option>
                <option value="10">10 guests</option>
            </select>
        </div>
        <div style="margin-top:8px;margin-bottom:8px">
            <div style="margin-bottom:8px">
                <div>Choose a Date</div>
            </div>
            <input type="text" aria-label="Check In" id="startDate" name="startDate" value="" placeholder="Check In" autoComplete="off" />
        </div>
        <div style="margin-bottom:8px">
            <div style="margin-bottom:8px">
                <div>Choose a Time</div>
            </div>
            <select id="" name="">
                <option selected="" value="1">8 am</option>
                <option value="2">9 am</option>
                <option value="3">10 am</option>
                <option value="4">11 am</option>
                <option value="5">1 pm</option>
                <option value="6">2 pm</option>
                <option value="7">3 pm</option>
            </select>
      </div>
        <div style="margin-top:8px">
            <div>Total Price: $<span id="result">65</span/> USD</div>
    </div>
        <div style="margin-top: 8px;">
            <button>Book Now</button>
        </div>
    </form>
  <script>
    function total(){
      let price = 65 ;
      let val = document.getElementById("selection").value;
      let result = Number(val) * price ;
      document.getElementById("result").innerHTML = result;
    }
  </script>
</body>
</html>

Thank you for your help oussama-jlassi!