JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<p>
    <select name="upsells[d1b80f42232a747a92efccd8eb786706][performance]" data-non-event="1" id="zoneMatchPerformance_1" class="performance rule-d1b80f42232a747a92efccd8eb786706">
        <option value="">Select Dining Option</option>
        <option value="6785">Mildmay Dining - Sunday 5 July 2015 6.00pm</option>
    </select>
</p>

<p>
    <select data-auto-quantity="0" name="upsells[d1b80f42232a747a92efccd8eb786706][6785][quantity]" class="rule-d1b80f42232a747a92efccd8eb786706 quantity performance-6785 upsells[d1b80f42232a747a92efccd8eb786706]">
        <option value="">Number of diners</option>
        <option value="1">1 diner</option>
    </select>
</p>

<p>
    <select name="upsells[d1b80f42232a747a92efccd8eb786706-drinks-1][performance]" data-non-event="1" id="zoneMatchPerformance_1" class="performance rule-d1b80f42232a747a92efccd8eb786706 rule-d1b80f42232a747a92efccd8eb786706_1">
	    <option value="6867">Middle &amp; Over Dining - Sunday 5 July 2015 6.00pm</option>
    </select>
</p>

<p>
    <select data-auto-quantity="0" name="upsells[d1b80f42232a747a92efccd8eb786706-drinks-1][6867][quantity]" class="rule-d1b80f42232a747a92efccd8eb786706 rule-d1b80f42232a747a92efccd8eb786706_1 quantity performance-6867 upsells[d1b80f42232a747a92efccd8eb786706]">
        <option value="">Number of diners</option>
        <option value="1">1 diner</option>
    </select>
</p>

<p>
    <select data-auto-quantity="0" name="upsells[c62162c118d1a2ca0c5b5565f5e0e587][7177][quantity]" class="rule-c62162c118d1a2ca0c5b5565f5e0e587 quantity performance-7177 upsells[c62162c118d1a2ca0c5b5565f5e0e587]">
        <option value="">Number of programmes</option>
        <option value="1" data-label-base="1 programme = £">1 programme = £20.00</option>
    </select>
</p>

<p>
    <select name="upsells[cb3deb059ed05fda6fcdf9fd2373684b][performance]" data-non-event="1" id="zoneMatchPerformance_18" class="performance rule-cb3deb059ed05fda6fcdf9fd2373684b">
        <option value="">Select...

JavaScript

$('button').on('click', function () {
    var errors = [];

    $('select.performance').each(function () {
        var value = $(this).val();

        if(!value.length) {
            return;
        }

        var
            option = $(this).find('option:selected').text(),
            id = $(this).attr('name').match(/(?:\[)([\w-]+)(?:\])/)[1],
            altid = id.match(/(\w+)(?:-\w+-)(\d+)/);

        if(altid) {
            id = altid[1] + '_' + altid[2];
        }

        var quantityField = $('.quantity.rule-' + id);

        if(!quantityField.length) {
            return;
        }

        if(!quantityField.val().length) {
            errors.push('Please select a quantity for ' + option);
        }
    });

    if(!errors.length) {
        alert('Everything is perfectly fine!');
    }
});