JSFiddle - React, Tailwind, and code Playground

by The_C

HTML

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-1 col-xxl-1 rc_form__col">
        <div class="form-group">
            <label class="control-label" for="registration_membership-173-singleselect-8">Wettbewerb Auswahl</label>
            <div class="input">
                <select required="required" class=" form-control" id="registration_membership-173-singleselect-8" name="tx_form_formframework[registration_membership-173][singleselect-8]">
                    <option value="WAHL">Bitte wählen</option>
                    <option value="ÖNM">Starte bei Newcomers</option>
                    <option value="ÖNM & IÖM">Starte bei beiden Bewerben</option>
                    <option value="IÖM">Starte bei Championships</option>
                </select>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-1 col-xxl-1 rc_form__col">
        <div class="form-group">
            <label class="control-label" for="registration_membership-173-multiselect-2">
                Newcomers Starklassen auswählen
            </label>
            <div class="input">
                <input type="hidden" name="tx_form_formframework[registration_membership-173][multiselect-2]" value="" /><select required="required" class="xlarge form-control" id="registration_membership-173-multiselect-2" multiple="multiple" name="tx_form_formframework[registration_membership-173][multiselect-2][]">
                    <option value="NO">Starte nicht bei Newcomers</option>
                    <option value="Junioren Classic">Junioren Classic</option>
                    <option value="Bikini Fitness">Bikini Fitness</option>
                </select>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-1 col-xxl-1 rc_form__col">
        <div class="form-group">
            <label class="control-label" for="registration_membership-173-multiselect-3">
                Championships Startklassen...

JavaScript

$(document).ready(function () {

            $("#registration_membership-173-singleselect-8").change(function (i) {
                if ($(this).val() == "ÖNM & IÖM") {
                    console.log($(this).val());
                    $('.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show(1000);
                    $('#registration_membership-173-multiselect-2, #registration_membership-173-multiselect-3, #registration_membership-173-singleselect-5').attr('required', '');

                    $('#registration_membership-173-multiselect-2, #registration_membership-173-multiselect-3, #registration_membership-173-singleselect-5').attr('data-error', 'This field is required.');

                } else {
                    $('.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').hide(500);
                    $('#registration_membership-173-multiselect-2, #registration_membership-173-multiselect-3, #registration_membership-173-singleselect-5').removeAttr('required');
                    $('#registration_membership-173-multiselect-2, #registration_membership-173-multiselect-3, #registration_membership-173-singleselect-5').removeAttr('data-error');
                };

                if ($(this).val() == "ÖNM") {
                    console.log($(this).val());
                    $('.rc_form__col:nth-child(2)').show(1000);
                    $('#registration_membership-173-multiselect-2').attr('required', '');
                    $('#registration_membership-173-multiselect-2').attr('data-error', 'This field is required.');
                } else if ($(this).val() == "IÖM") {
                    console.log($(this).val());
                    $('.rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show(1000);
                    $('#registration_membership-173-multiselect-3, #registration_membership-173-singleselect-5').attr('required', '');
                   ...