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 = document.getElementById("testId");
            var optionsText = e.options[e.selectedIndex].text;
            var optionsValue = e.options[e.selectedIndex].value;
            var optionsFtr = $('option:selected', this).attr('ftr');
            $("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
        });
    });