JSFiddle - React, Tailwind, and code Playground

by olex

HTML

<h3>Selected: <span></span></h3>
<div id="slectors"> </div>
<b>Select:</b><br> 
<select name="5043:finopt:0" size=1 id="selColor">
    <option value="">Color:</option>
    <option value="Black" >Black</option>
    <option value="Green" >Green</option>
    <option value="Pink " >Pink </option>
    <option value="Orange" >Orange</option>
    <option value="Purple" >Purple</option>
    <option value="White" >White</option>
    <option value="Yellow" >Yellow</option>
    <option value="Blue" >Blue</option>
    <option value="Navy" >Navy</option>
    <option value="Cream" >Cream</option>
</select>
<select name="5043:finopt:1" size=1 >
    <option value="Size:" selected>Size:</option>
    <option value="S" >S</option>
    <option value="M" >M</option>
    <option value="L" >L</option>
    <option value="XL" >XL</option>
</select>
<input name="image" type="submit" class="cusmo-btn" value="Add to cart">

CSS

.dynamic-links { width: 25px; height:25px; text-align:center; }
#color-name{ display: none; }
#optionforselection {display: none;}

<!-- Colors --> 
.Red{background-color:red;}
.Yellow{background-color:yellow;}
.Purple{background-color:purple;}
.Beige{background-color:beige;}
.Black{background-color:black;}
.Cream{background-color:#FFFAD9;}
.Navy{background-color:navy;}
.Blue{background-color:blue;}
.Green{background-color:green;}
.Orange{background-color:orange;}
.Pink{background-color:pink;}

#slectors a{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 5px;
    margin-left: 5px;
    width: 30px;
    height:30px;
    display: inline-block;
    border-style: solid;
    border-color:#999999;
    border-width: 1px;
}

#slectors a:hover{
  opacity: 0.8;
  filter: alpha(opacity=80); box-shadow: 0 0 6px #999; border-color: #fff;
}

.clicked-selector {border-color: #f00 !important;}

#slectors{

}

JavaScript

$('#selColor').find('option').each(function() {
        var selfText = $(this).val();
        if (selfText) {
            var link = $('<a href="#" class="dynamic-links ' + selfText + '"><div id="color-name">' + selfText + '</div></a>');
            $('#slectors').append(link);
        }
    });
    
    $('#slectors a').click(function() {
        $('#selColor option:selected').attr('selected', false);
        $('#selColor option:contains("'+$(this).text()+'")').attr('selected', true);
        $('#selColor').trigger('change');
        return false;
    });
    
    $('#selColor').on('change', function() {
        var selected = $(this).children('option:selected').val();
        $('h3 span').text(selected); alert(selected);
        $('.dynamic-links').removeClass("clicked-selector").find('.'+selected).addClass("clicked-selector");
    });