Group size using booking party (and variant price breaks)

booking-form.snippet.html

{% comment %}
BookThatApp auto installed snippet. Changes made to this file will be lost if installed again.
{% endcomment %}

{% if product.tags contains 'Booking Party' %}
	<label for="booking-party">Number of Participants</label>
    <div class="selector-wrapper">
      <select id="booking-party" name="properties[booking-party]">
        {% for n in (1..30) %}
        <option>{{ n }}</option>
        {% endfor %}
      </select>
    </div>
	<script>
      $('#product-variants').hide();
      
      $('#booking-party').change(function() {
        var qty = parseInt($(this).val(), 10);
        $('#product-select-option-0 option').each(function() {
          var vals = $(this).val().split(' - '),
              low = parseInt(vals[0], 10), high = parseInt(vals[1], 10);
          
          if (low < qty && qty < high) {
            $('#product-select-option-0').val($(this).val()).trigger('change');
            return false;
          }
        })
      })
	</script>
{% endif %}

{% if product.metafields.bookthatapp.config %}
{% unless bta_configured %}
<div class="booking-form">
    <div class="selector-wrapper">
        {% capture attribute %}booking-start{% endcapture %}
        <label for="{{ attribute }}">Date</label>
        <input id="{{ attribute }}" type="text" name="properties[{{ attribute }}]" size="12" class="datepicker bta required bta-load-enable" data-handle="{{ product.handle }}" data-variant="{{ product.variants.first.id}}" data-bta-product-config="{{ product.metafields.bookthatapp.config }}" data-bta-variant-config="{% for variant in product.variants %}{{ variant.id }}:{{ variant.metafields.bookthatapp.config }}{% unless forloop.last %},{% endunless %}{% endfor %}" disabled="disabled" />
        <div class="bta-scheduled-times-widget" data-label="esson Time:" data-prompt="Please choose a date..." data-datepicker="{{ attribute }}">
            <p class="loading">Loading SandCastle Lesson schedule...</p>
            <div class="booked-out-message" style="display:none">Sorry, that Lesson time is full.</div>
        </div>
    </div>
</div>

<script>
var bta = {
    productId: {{ product.id }}
}
</script>
{% assign bta_configured = true %}
{% endunless %}
{% endif %}