JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<fieldset>
    <legend>"Server Side"</legend>
<form id="entry">
     <h1>Arrival Type</h1>

    <label for="type_order">
        <input type="radio" name="entry" value="Order" id="type_order" /> By Order</label>
    <label for="type_order">
        <input type="radio" name="entry" value="Reservation" id="type_res" /> By Reservation</label>
    <label for="type_order">
        <input type="radio" name="entry" value="Participant" id="type_part" /> By Participant</label>
    <label for="type_order">
        <input type="radio" name="entry" value="Event" id="type_event" /> By Event</label>
    <br>
    <label for="ent_val">Value:
        <input type="text" name="ent_val" id="ent_val" />
        </abel>
</form>
</fieldset>
<fieldset>
    <legend>"Client Form"</legend>
    <div id="waiver"></div>
    </fieldset>

CSS

label {
    padding: .25em 1em; display: block;
}
#waiver {
    margin: 1em;
    padding: 1em;
}

fieldset {
    margin-bottom: 1em;
}
}

.group { border: 1px solid black; padding; 1em; margin: .5em 0; }

JavaScript

var partData = [{
    reservationId: 1200,
    order: 1,
    participants: [{
        id: 1,
        name: "John",
        waived: false
    }, {
        id: 2,
        name: "John Jr.",
        waived: false
    }]
}, {
    reservationId: 1201,
    order: 2,
    participants: [{
        id: 3,
        name: "Melinda",
        waived: true
    }]
}, {
    reservationId: 1202,
    order: 3,
    participants: [{
        id: 4,
        name: "Taylor",
        waived: false
    }, {
        id: 5,
        name: "William",
        waived: false
    }, {
        id: 6,
        name: "Leslie",
        waived: false
    }]
}, {
    reservationId: 1208,
    order: 3,
    participants: [{
        id: 7,
        name: "Franklin",
        waived: false
    }]
}];

function filterData(evt) {
    var val = $('#ent_val').val(),
        myData = partData,
        str = "", i ,j;
    switch (evt.target.value) {
        case "Order":
            myData = _.filter(partData, function(coll) {
             return coll.order == val;
            });
            break;
        case "Reservation":
            myData = _.filter(partData, function(coll){
             return coll.reservationId == val
            });
            break;
        case "Event":
            break;

    }

    for (i = 0; i < myData.length; i++) {
        str += '<div class="group">\n';

        for (j = 0; j < myData[i].participants.length; j++) {
            str += '<input type="checkbox"' + (myData[i].participants[j].waived ? ' checked' : '') + '> ' + myData[i].participants[j].name + '<br><br>\n';
        }
        str += '</div>\n';
    }

    $('#waiver').html(str);
}

$('#entry').on('click', 'input', filterData);