JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.14.8/cdn.js"></script>
<form x-data="{
    plan_type: 2,
    plan_type_desc: 'individual',
    first_name: '',
    last_name: '',
    street: '',
    city: '',
    country: '',
    postcode: '',
    telephone: '',
    email: '',
    gender: '',
    cycle: 'abc123',
    dob: '',
    classes_entered: '',
    errors: {},
    plans: [{
        id: 1,
        name: 'Individual'
    }, {
        id: 2,
        name: 'Club'
    }],
    cycles: [{
        key: 'abc123', 
        label: 'example 1', 
        raw_amount: 123, 
        amount: '£123'
    }, {
        key: 'def456', 
        label: 'example 2', 
        raw_amount: 123, 
        amount: '£123'
    }],
    additionals: [],
    addAdditional() {
        this.additionals.push({
            first_name: '',
            last_name: '',
            gender: '',
            dob: '',
            cycle: this.cycle,
            classes_entered: '',
        });
    },
    removeAdditional(e, idx) {
        e.preventDefault();
        this.additionals.splice(idx, 1);
    },
    updateAdditional(e, idx, field) {
        this.additionals[idx][field] = (e.target.nodeName === 'SELECT' ? e.target.options[e.target.selectedIndex].value : e.target.value);
    },
    planChanged(e) {
        this.plan_type_desc = e.target.getAttribute('title').toLowerCase().indexOf('club') === -1 ? 'individual' : 'club';
        if (this.plan_type_desc === 'club' && this.additionals.length === 0) {
            this.addAdditional();
        }
    },
    total: 0,
    calculateTotal() {
        this.total++;
        return this.total;
    },
    submit(e) {
        let errors = {},
            fd = new FormData(e.target);
        console.log(this.first_name);
    },
}" @submit.prevent="submit" class="custom-armember-signup-form" x-effect="console.log(additionals)">
    <h1>Membership Application Form</h1>
    <label>Name of individual or leading club member</label>
    <div...