JSFiddle - React, Tailwind, and code Playground

HTML

<div id="featured_1">
    <div class="product-options">
        <h2>Product title</h2>
        <div class="product-option">
            <select class="product-option-value">
                <option>Test</option>
                <option>Another Test</option>
            </select>
        </div>
    </div>
</div>

CSS

#featured_1 .product-options .product-option:nth-child(2) .product-option-value option:nth-child(1) {background:red}

#featured_1 .product-options .product-option:nth-child(2) .product-option-value option:nth-child(2) {background:green}

JavaScript

jQuery("#featured_1 .product-options .product-option:nth-child(2) .product-option-value option:nth-child(1)").click(function(){
    jQuery("body").css("background-color", "red");
});

jQuery("#featured_1 .product-options .product-option:nth-child(2) .product-option-value option:nth-child(2)").click(function(){
    jQuery("body").css("background-color", "green");
});