JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<link rel="stylesheet" href="http://blog.timodonnell.com/css3-google-buttons/google-buttons.css">
<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<a href="#" class="g-button blue no-text" id="reset"><i class="icon-refresh icon-white"></i></a>
<input type="submit" class="g-button red" value="submit" />

CSS

:root { padding: 20px; }
select { float: left; width: 80px; padding: 5px 10px; margin-right: 10px; }
select:focus { background-color: #000; color: #fff }

JavaScript

$(function(){

    $("select").attr("disabled", "disabled");
    
    var currentSelect = 1, selectedAttr;
    makeAvailable(currentSelect);
    
    $("select").change(function(){
        selectedAttr = $(this).find("option:selected").attr("value");
        removeSelectedAttr(currentSelect, selectedAttr)
        
        
        makeUnAvailable(currentSelect);
        currentSelect = currentSelect + 1;
        makeAvailable(currentSelect);
    });
    
    $("a#reset").click(function(){
        // do page refresh
    });

});
function makeAvailable(s) {
    $("select:nth-child("+s+")").removeAttr("disabled").focus();
}
function makeUnAvailable(s) {
    $("select:nth-child("+s+")").attr("disabled", "disabled");
}
function removeSelectedAttr(s, c) {
    $("select:not(:nth-child("+s+")) option[value="+c+"]").remove();
}