JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<div class="form-field space-leader" data-field-error="property-type" data-form-field>
    <label>{{ LABEL_PROPERTY_TYPE|raw }}</label>

    <select data-toggle-selector=".js-propertyType" name="propertyType">
        <option value="">Please select one:</option>
        <option value="SingleFamily">Single Family Residence</option>
        <option value="Condo">Condo</option>
        <option value="MultiUnit">Multi Unit</option>
        <option value="Manufactured">Mobile / Manufactured</option>
    </select>
</div>

<!-- TODO: JS Validation needs to toggle HOA amount on/off depending upon the answer to "propertyUse" -->
<fieldset class="bubbleBox--top hide js-propertyType" data-propertyType style="">
    <div class="form-field space-leader" data-field-error="property-hoa-amount" data-form-field>
        <label>{{ LABEL_HOA_AMOUNT|raw }}</label>
        <div class="has-input-icon">
            <span class="input-icon">$</span>
            <input class="input-for-icon js-curMask" data-validation="property-hoa-amount" data-length="1-10" data-qatp="property-hoa-amount" id="property-hoa-amount" maxlength="10" name="property-hoa-amount" type="tel" value="{{ property['annualHOAAmount'] }}" />
        </div>
    </div>
</fieldset>

CSS

.hide {
    display: none;
}

JavaScript

$('[data-toggle-selector=".js-propertyType"]').on({
    change: function change(event) {
        event.preventDefault();
        console.log('select changed')

        if ($('[data-toggle-selector=".js-propertyType"]').val() === 'Condo') {
            console.log('value matches?');
            $('[data-propertyType]').removeClass('hide');
        } else {
        $('[data-propertyType]').addClass('hide');
        }
    }
});