JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<form id="booking_form">Price Adult : <span id="adult">3,500</span>

    <br />Price Child : <span id="child">3,000</span>

    <br />
    <input type="hidden" name="p1" id="p1" value="3500" />
    <input type="hidden" name="p2" id="p2" value="3000" />
    <input id="boxid" type="checkbox">&nbsp;
    <label for="boxid">เดินทางจากภูเก็ต</label>
    <hr />Adult :
    <select name="n_adult" id="n_adult">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>Child :
    <select name="n_child" id="n_child">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <hr />฿<span name="total" id="total"></span>

</form>

JavaScript

$('#boxid').click(function () {
    if ($(this).is(':checked')) {
        $(this).siblings('#adult').html('3,700');
        $(this).siblings('#child').html('3,200');
        $('#total').text(0);
        $('input[name=p1]').val('3700');
        $('input[name=p2]').val('3200');
    } else {
        $(this).siblings('#adult').html('3,500');
        $(this).siblings('#child').html('3,000');
        $('#total').text(0);
        $('input[name=p1]').val('3500');
        $('input[name=p2]').val('3000');
    }
});

$('#n_adult,#n_child').change(function () {
    $("#total").text('฿' + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$('#p1').val() * $('#n_adult').val() + $('#p2').val() * $('#n_child').val(),").toString());

});