JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
        <li>
            <div class="ftrsTitle">BODY</div>
            <select class="testClass" id="testId">
            <option>Select</option>
            <option ftr="bod" value="blk">Black</option>
            <option ftr="bod" value="grn">Kelly Green</option>
            <option ftr="bod" value="red">Red</option>
            <option ftr="bod" value="roy">Royal</option>
            </select>       
        </li>   
        <li>
            <div class="ftrsTitle">TRIM</div>
            <select class="testClass">
            <option>Select</option>
            <option ftr="trm" value="blk">Black</option>
            <option ftr="trm" value="grn">Kelly Green</option>
            <option ftr="trm" value="red">Red</option>
            <option ftr="trm" value="roy">Royal</option>        
            </select>       
        </li>   
    </ul>
    <div id="vars"></div>

JavaScript

$(document).ready(function(){
        $("select").on('change', function(){
                    var e = $(this).find("option:selected");
                    $("#vars").html("<p>optionsText: " + e.text() + "</p><p>optionsValue: " + $(this).val() + "</p><p>optionsFtr: " + e.attr("ftr") + "</p>");
            });
    });