JSFiddle - React, Tailwind, and code Playground

by adardesign

HTML

<div id="allPrintSizes">
                                <span class="sizeSelected">DIE CUT WALLETS (X4)</span>
                                <span class="sizeSelected">MINI WALLETS (X8)</span>
                                <span class="sizeSelected">3.5X5</span>
                                <span>6X18</span>
                                <span class="sizeSelected">4X6</span>
                                <span>6X18</span>
                                <span class="sizeSelected" >8X10</span>
                                <span>6X18</span>
                                <span>6X18</span>
                                <span class="sizeSelected">6X10</span>
                                <span class="sizeSelected">7X11</span>
                                <span class="sizeSelected">3X6</span>
                                <span class="sizeSelected">3.5X24</span>
                              
                            </div>
                            <a id="updateSizes">Update</a>
                        </div>

CSS

#allPrintSizes span{display:none; float:left; margin:0 3px 3px 0; border:1px solid #ccc; padding:3px 7px;
-moz-border-radius:3px;

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */
color:#555;

 }
#allPrintSizes span.sizeSelected{
display:block;
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
border-color:#5796D9;
color:#fff;
}

#allPrintSizes.editMode span{display:block; cursor:pointer;}
#updateSizes{ clear:left;}

JavaScript

$("#updateSizes").bind("click",function(){
    var allSizesContainer = $("#allPrintSizes"),
        updateButton = $(this);
    if(!allSizesContainer.hasClass("editMode")){
            allSizesContainer.addClass("editMode");
            updateButton.html("save");
            allSizesContainer.find("span").bind("click",function(){
                allSizesContainer.hasClass("editMode") && $(this).toggleClass("sizeSelected");
            })
        }
        else{
            allSizesContainer.removeClass("editMode");
            updateButton.html("update");
        }    
});