Here is my html:

```
<div id="drinks">
    <select id="test">
        <option data-tab="Coffee">Coffee</option>
        <option data-tab="Cold Drinks">Cold Drinks</option>
        <option data-tab="Hot Drinks">Hot Drinks</option>
    </select>
    <div class="section-wrapper">
        <div class="row">
            <section class="Coffee">
                <h3>Coffee </h3>
                <h4>Coffee Flavor</h4>
            </section>
        </div>
        <div class="row">
            <section class="Cold Drinks">
                <h3>Cold Drink</h3>
                <h4>Cold Drink</h4>
            </section>
        </div>
        <div class="row">
            <section class="Hot Drinks">
                <h3>Hot Drink</h3>
                <h4>Hot Drink</h4>
            </section>
        </div>
    </div>
</div>

```

Javascript code:

```
$(document).ready(function() {
    $("#test").on('load change', function() {  
        $("#test option").each(function() {
            $("#drinks ." + $(this).val()).hide();
        })
        $("#drinks ." + $(this).val()).show();
    }).change();
});

```

I want to only show the class that matches the dropdown data-tab value.
So if coffee is selected only coffee's h3 and h4 tag should be displayed. Similarly for other drop-down. What am i doing wrong ?
Here is the link to my fiddle.

<https://jsfiddle.net/mmaharjan/onbusdhv/>