JSFiddle - React, Tailwind, and code Playground

by m4xout

HTML

<select class="selectOption">
    <option>Analytics</option>
    <option>Translation</option>
    <option>Poll</option>
    </select>
    
    <div id="changingArea">
        <div id="Analytics" class="desc">Analytics</div>
        <div id="Translation" class="desc">Translation</div>
        <div id="Poll" class="desc">Poll</div>

    </div>
    
    
    <div class="customr-container-item ui-sortable-handle full-wide" data-customr-container-item-index="11" data-customr-container-item-name="customer[Source]" data-customr-container-item-parent-field-id="customr17">

        <div class="customr-field customr-field-select customr-optional" data-customr-field-id="customr30" data-customr-field-path="/Source" data-customr-field-name="customer[Source]">

        <label class=" customr-control-label" for="customr30">How did you hear about us?</label>

        <select id="customr30" name="customer[Source]" data-autotag="false" class="customr-control">


        <option value="">-</option>

        <option value="Friends">Friends</option>
        <option value="Social Media">Social Media</option>
        <option value="Event">Event</option>
        <option value="Parents">Parents</option>
        <option value="School">School</option>
        <option value="Other">Other</option>


    </select>
    
    <div id="Other" class="desc">Other</div>

   <div class="customr-container-item ui-sortable-handle full-wide" data-customr-container-item-index="12" data-customr-container-item-name="customer[Other description]" data-customr-container-item-parent-field-id="customr17">

        <div class="customr-field customr-field-text customr-optional other-desc customr-autocomplete" data-customr-field-id="customr31" data-customr-field-path="/Other description" data-customr-field-name="customer[Other description]">

        <label class=" customr-control-label" for="customr31">Other description</label>

        <input type="text" id="customr31" name="customer[Other description]"...

CSS

.desc {display: none;}

JavaScript

$(function(){
          $('#customr30').change(function(){
            var selected = $(this).find(':selected').text();
            //alert(selected);
            $(".other-desc").hide();
             $('#' + selected).show();
          }).change()
});