JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<div id="icons_761" class="icons">
            <div>
                <input id="imgcolor_761_Black_Solid" src="http://placehold.it/37x37" class="emptyicon swatch" type="image" value="Black_Solid"></div>
            <div>
                <input id="imgcolor_761_Coral_Solid" src="http://placehold.it/37x37" class="emptyicon swatch" type="image" value="Coral_Solid"></div>
            <div>
                <input id="imgcolor_761_Emerald_Solid" text="Emerald Solid" class="emptyicon swatch" type="button" value="Emerald Solid"></div>
            <div>
                <input id="imgcolor_761_Fuchsia_Print" text="Fuchsia Print" class="emptyicon swatch" type="button" value="Fuchsia Print"></div>
            <div>
                <input id="imgcolor_761_Lavender_Solid" src="http://placehold.it/37x37" class="emptyicon swatch" type="image" value="Lavender_Solid"></div>
            <div>
                <input id="imgcolor_761_Marine_Print" src="http://placehold.it/37x37" class="emptyicon swatch" type="image" value="Marine_Print"></div>
            <div>
                <input id="imgcolor_761_Marine_Solid" src="http://placehold.it/37x37" class="emptyicon swatch" type="image" value="Marine_Solid"></div>
            <div>
                <input id="imgcolor_761_Natural_Print" text="Natural Print" class="emptyicon swatch showborder" type="button" value="Natural Print"></div>
            <div>
                <input id="imgcolor_761_Natural_Solid" text="Natural Solid" class="emptyicon swatch" type="button" value="Natural Solid"></div>
            <div>
                <input id="imgcolor_761_Navy_Solid" src="http://placehold.it/37x37" class="emptyicon swatch" type="image" value="Navy_Solid"></div>
            <div>
                <input id="imgcolor_761_Rose_Solid" src="http://placehold.it/37x37" class="emptyicon swatch" type="image" value="Rose_Solid"></div>
            <div>
                <input id="imgcolor_761_Watermelon_Solid" text="Watermelon Solid" class="emptyicon...

CSS

.emptyicon
    {
        width: 37px;
        height: 37px;
        float: left;
        font-size: 8px;
        border: 1px solid white;
    }
    
    .sizewidth
    {
        width: 19px;
        height: 10px;
        padding: 5px 3px 8px 3px;
        margin: 2px;
    }
    
    
    
    .showborder
    {
        border: 1px solid black;
    }
    
    #product
    {
        border: 1px solid #c1c1c1;
    }
    
    .sizebtn
    {
        margin: 2px;
        height: 31px;
        width: 37px;
    }
    
    .icons
    {
        width: 213px;
        float: left;
        padding: 5px;
        margin: 5px;
    }
    
    .icons div
    {
        padding: 0px;
        float: left;
    }
    
    .icons input
    {
        padding: 0;
        cursor: pointer;
        text-align: center;
        background: #FFF;
        color: #000;
        display: block;
        height: 37px;
        width: 37px;
        line-height: 37px;
        font-size: .6em;
        overflow: hidden;
        float:left;
    }
    
    
    .sizes
    {
        float: left;
        width: 213px;
    }
    
    .sizes div
    {
        padding: 2px 0 0 2px;
        float: left;
    }
    
    .sizes input
    {
        padding: 0;
        cursor: pointer;
        text-align: center;
        background: #FFF;
        color: #000;
        display: block;
        height: 30px;
        width: 30px;
        font-size: 1.2em;
    }
    
    
    .configs
    {
        float: left;
        width: 279px;
    }
    
    .configs div
    {
        padding: 2px 0 0 2px;
        float: left;
    }
    
    .configs input
    {
        padding: 0;
        cursor: pointer;
        text-align: center;
        background: #FFF;
        color: #000;
        display: block;
        height: 30px;
        width: 30px;
        font-size: 1.2em;
    }

JavaScript

$("document").ready(function () {

            //Clicked on color: will change sizes backgrounds ( in stock or not)
            $("[id^='imgcolor_761']").on("click", function () {
                //set style to no border for all
                
                $("[id^='imgcolor_761']").removeClass('showborder');
                $(this).addClass("showborder");
               
                return false;

            });
        });