Capturing booking names on the booking form

booking-form.snippet

<div class="booking-form">
   <!-- normal booking form properties here -->
   
   <div id="booking-names">
      <div class="selector-wrapper booking-name">
          {% capture attribute %}booking-name{% endcapture %}
          <label for="{{ attribute }}">Name:</label>
          <input id="{{ attribute }}" type="text" name="properties[{{ attribute }}]" class="bta-load-enable required" />
      </div>
   </div>
</div>

<script>
$(document).ready(function() {
   validator = $('form[action*="/cart/add"]').validate();
   
   $('select[name="quantity"]').change(function() {
      var qty = $(this).val(),
          template = $('.booking-name:first');

      validator.resetForm();
      $('.booking-name:gt(0)').remove();

      for (i = 1; i < qty; i++) {
        var clone = template.clone();
        clone.find('span.counter').html(i+1);
        
        $(clone).find('input, select').each(function() {
          var elem = $(this),
              label = elem.closest('label'),
              id = elem.attr('id'),
              name = elem.attr('name');
          
          id = id.substring(0, id.lastIndexOf('-')) + '-' + (i+1);
          name = name.substring(0, name.lastIndexOf(']')) + ' ' + (i+1) + ']';
          
          label.attr('for', id);
          elem.attr('id', id);
          elem.attr('id', id).attr('name', name).val('');
        });
        
        clone.appendTo($('#booking-names'));
   })
})
</script>

2 col responsive layout:

#booking-names {
  margin: 20px 5px;
  padding: 10px;
  width: 100%;
  
  .booking-name {
    margin-top: 10px;
    font-size: smaller;

    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin: 0 -10px;
    }
    
    .column {
      flex-basis: 100%;
      margin: 5px 0;
      padding: 0 10px;
      
      input, select {
        width: 100%;
        font-size: smaller;
      }
    }

    @media screen and (min-width: 800px) {
      .column {
        flex: 1;
      }
    }    
    
    label {
      display: block;
    }
        
    label.error {
      color: red;
    }
  }
}