Setting quantity max based on selected variant and date range

booking-form.liquid.html

<script type="text/javascript">
var bta = {
    product_id: {{ product.id }},
    callbacks: {
        dateSelected: function(input, date) {
            checkAvailable();
        },
        available: function(data) { // invoked after availability data from BookThatApp is loaded via Ajax.
            checkAvailable();
        }
    }    
};

function checkAvailable() {
    var start = $('#booking-start').datepicker('getDate'),
        finish = $('#booking-finish').datepicker('getDate'), // assign this to start if you don't have an end date
        capacity = bta.availableCapacity($('#product-select option:selected').val(), start, finish),
        qty = parseInt($('#quantity').val(), 10);
        
    $('#quantity').attr('max', capacity);
    
    if (capacity == 0) {
        $('#add-to-cart').attr('disabled', 'disabled');
    } else {
        $('#add-to-cart').removeAttr('disabled');                
    }
    
    if (qty > capacity) {
        $('#quantity').val(capacity);
    } else if (qty == 0 && capacity > 0) {
        $('#quantity').val(1);
    }

    return capacity > 0;
}

// add this to theme.liquid if jquery loaded after page load
$('#quantity').change(function() {
    checkAvailable(); // defined in booking-form snippet
});
</script>

Do I just add this to the booking-form.liquid snippet in place of:

var bta = {
productId: {{ product.id }}
}

?
I am using the 'New Standard' theme if that matters. Regards