JSFiddle - React, Tailwind, and code Playground

HTML

<a value="2" class="colorlink" href="#">BLACK</a>
<a value="63" class="colorlink"  href="#">BLUE</a>
<a value="66" class="colorlink" href="#" >GREEN</a>
<br />

<input type="hidden" name="color" id="productColor" value="2"/>

<select id="size" name="size">
<option value="2" class="c2 c63" >SMALL</option>
<option selected value="3" class="c2 c63 c66" >MEDIUM</option>
<option value="4" class="c2">LARGE</option>
<option value="5" class="c2 c63">X-LARGE</option>
</select>

JavaScript

$(function() {
    $('.colorlink').click(function() {
        $('#productColor').val($(this).attr('value'));
        $('#size option').hide();                     
        $('#size option.c' + $(this).attr('value')).show();                  
    });
});