JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div>
    <select id="cat1">
        <option value="Value 1">Value 1 Text</option>
        <option value="Value 2">Value 2 Text</option>
        <option value="Value 3">Value 3 Text</option>
        <option value="Value 4">Value 4 Text</option>
    </select>
    <a class="reset" id="cat1reset"><span></span> <em>Clear</em></a>
</div>

<div>
    <select id="cat2">
        <option value="Value 1">Value 1 Text</option>
        <option value="Value 2">Value 2 Text</option>
        <option value="Value 3">Value 3 Text</option>
        <option value="Value 4">Value 4 Text</option>
    </select>
    <a class="reset" id="cat2reset"><span></span> <em>Clear</em></a>
</div>
    
<div>
    <select id="cat3">
        <option value="Value 1">Value 1 Text</option>
        <option value="Value 2">Value 2 Text</option>
        <option value="Value 3">Value 3 Text</option>
        <option value="Value 4">Value 4 Text</option>
    </select>
    <a class="reset" id="cat3reset"><span></span> <em>Clear</em></a>
</div>

CSS

.reset { display:none; }
.reset em { float:right; }

JavaScript

$('select').change(function() {
    $(this).hide();
    $(this).next('.reset').find('span').text( $('option:selected', this).text() );
    $(this).next('.reset').show();
})