I'm currently working on a hotel booking form where prices are calculated based on the number of adults, seniors, and students. I'm trying to add a date range picker feature that will determine the total cost depending on the selected number of days. However, when I try to include a second calendar for selecting the end date, it doesn't show up. How can I successfully integrate the second calendar so users can select an end date and have the total cost calculated?
update_amounts();
$('select').change(update_amounts);
function update_amounts() {
var sum = 0.0;
$('#tickets > tbody > tr').each(function() {
var qty = $(this).find('option:selected').val();
var price = $(this).find('.price').text().replace(/[^\d.]/, '');
var amount = (qty * price);
sum += amount;
$(this).find('.subtotal').text('$' + amount);
});
$('#total').val('$' + sum);
$('#total').val('$')
};<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<table>
<tbody>
<tr>
<td><strong>Adult</strong><a href="#" class="tooltip-1" data-placement="top" title="" data-original-title="16 - 65 years old"><sup class="icon-info-4"></sup></a>
<span class="price">3,400</span>
</td>
<td>
<div class="styled-select">
<select class="form-control" name="adults" id="adults">
<option value="">Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</td>
<td class="text-center"><span class="subtotal">ksh 0</span>
</td>
</tr>
<tr>
<td><strong>Senior</strong><a href="#" class="tooltip-1" data-placement="top" title="" data-original-title="Over 65 years old"><sup class="icon-info-4">
</sup></a><span class="price">3,400</span>
</td>
<td>
<div class="styled-select">
<select class="form-control" name="senior" id="senior">
<option value="">Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</td>
<td class="text-center"><span class="subtotal">$0</span>
</td>
</tr>
<tr>
<td><strong>Student >15 yrs</strong> <span class="price">2,000</span> </td>
<td>
<div class="styled-select">
<select class="form-control" name="student" id="student">
<option value="">Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</td>
<td class="text-center"><span class="subtotal">$0</span>
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<label>From?</label>
<input type="text" class="form-control" id="date_pick" name="date_pick" data-date-format="M d, D" placeholder="Select a date">
<div class="form-group">
<label>To?</label>
<input type="text" class="form-control" id="date_pick" name="date_pick" data-date-format="M d, D" placeholder="Select a date">
</div>
<div class="form-group">
<label>Name and Lastname</label>
<input type="text" class="form-control" id="name_lastname_booking" name="name_lastname_booking" placeholder="Name and Lastname">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="email_booking" name="email_booking" placeholder="Email">
</div>
<div class="form-group">
<label>Telephone</label>
<input type="text" class="form-control" id="telephone_booking" name="telephone_booking" placeholder="Telephone">
</div>
<div class="form-group add_bottom_30">
</div>
<div class="form-group">
<input type="submit" value="Book now" class="btn_full" id="submit-booking">
</div>
</form>
</body>