JSFiddle - React, Tailwind, and code Playground

by Kyle Welsby

HTML

<div class="selects">
    <select class="variable_priority unique required" name="select[]" required>
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="variable_priority unique required" name="select[]" required>
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="variable_priority unique required" name="select[]" required>
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="variable_priority unique required" name="select[]" required>
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    
    <select class="variable_priority unique required" name="select[]" required>
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="variable_priority unique required" name="select[]" required>
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="variable_priority unique required" name="select[]" required>
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="variable_priority unique required" name="select[]" required>
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
   ...

CSS

.valid{
    box-shadow:0 0 10px green;
    -webkit-box-shadow:0 0 10px green;
    -moz-box-shadow:0 0 10px green;
}

JavaScript

$(document).ready(function() {
    
    function checkSelected(val) {
        var ret = false;
        $(".variable_priority").each(function() {
            if ($(this).val() === val) {
                ret = true;
            }
        });
        return ret;
    }

    function totalValue() {
        var total = 0;
        $(".variable_priority:first option[value!=0]").each(function() {
            total = total + parseInt($(this).val(), 10);
        });
        return total;
    }
    function totalSelectedValue(){
        var total = 0;
        $(".variable_priority option:selected").each(function() {
            total = total + parseInt($(this).val(), 10);
        });
        return total;
    }
    $('.value').html(totalValue());
    $('.variable_priority').change(function() {
   //     variable_priority = variable_priority + parseInt($(this).val(), 10);
        $('.value').html(totalSelectedValue() + " out of " + totalValue());

        $('option', this).each(function() {
            if (checkSelected($(this).val()) && $(this).val() !== "0") {
                $('.variable_priority option[value=' + $(this).val() + ']').attr('disabled', true);
            } else {
                $('.variable_priority option[value=' + $(this).val() + ']').removeAttr('disabled');
            }
        });
        if (totalSelectedValue() === totalValue()) {
            $('.selects').removeClass('invalid').addClass('valid');
        } else {
            $('.selects').removeClass('valid').addClass('invalid');
        }
    });
});