<table class=“uikit-table item-table-form”>

<thead>
  <tr>
    <th>Date</th>
    <th>Item number</th>
    <th>Amount</th>
  </tr>
</thead>

<tbody>
  {% for i in (1..3) %}
  {% capture group_number %}item-group-{{i}}{% endcapture %}
  <tr class="item-row"  data-label="Service Item" data-parsley-item-row="true" data-parsley-validate-if-empty="" >
    <td data-label="Date">
      {% include forms/date-field.html
        past_date="true"
        parsley_group=group_number
      %}
    </td>

    <td data-label="Item number">
      {% include forms/text-field.html
        pattern="^\d{1,5}$"
        parsley_group=group_number
      %}
    </td>

    <td data-label="Amount">
      {% include forms/text-field.html placeholder="$"
        pattern="^\d+\.?(\d{1,2})?"
        type="number"
        step="0.01"
        parsley_group=group_number
      %}
    </td>
  </tr>
  {% endfor %}
</tbody>

</table>

{% include buttons/link-button.html text=“Add another item” className=“uikit-btn–tertiary uikit-btn–block” onclick=“addRow()”%}

<script type=“text/javascript”>

var addRow = function() {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'document';

  xhr.open('GET', window.location.href);
  xhr.onload = function() {
    var tableRow = this.response.querySelector('.item-row');
    var tableBody  = document.querySelector('.uikit-table tbody');

    tableBody.appendChild(tableRow);
  };

  xhr.send();
}

document.addEventListener("DOMContentLoaded", function(event) {
  window.Parsley.addValidator('itemRow', {
    validateString: function(value, requirement, instance) {
      var cells = instance.element.querySelectorAll('input');
      var isFilledIn = Array.prototype.some.call(cells, function(cell) { return cell.value ? true : false });
      var group = cells[0].dataset.parsleyGroup;

      if (isFilledIn) {
        return instance.parent.validate({group: group, force: true});
      }
      return true;
    },
    messages: {
      en: 'Please enter all fields for this row',
    }
  });
});

</script>