JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<div>Overall Weight (60% max): <input type="text" id="sumWeight" value=""></div>
    <div style="margin:10px 0 20px 170px;">
        <select name="weightMem" id="weightMem" class="wt" size="13">
        </select>
    </div>
    <div style="margin:10px 0 20px 170px;">
        <select name="weightFuture" id="weightFuture" class="wt" size="13">
        </select>
    </div>
            <div style="margin:10px 0 20px 170px;">
        <select name="weight3" id="weight3" class="wt" size="13">
        </select>
    </div>

JavaScript

$('#ratingMem,#weightMem').change(function () {
                sumAndLimit();
            });
            $('#ratingFuture,#weightFuture,#weight3').change(function () {
                sumAndLimit();
            });

$(".wt").each(function(){
    for (var i = 0; i <= 60; i += 5) {
        $(this).get(0).options.add(new Option(i > 0 ? i : "Pick a weight", i));
    }
});

function sumAndLimit() {
    var sum = 0;
    $(".wt").each(function() {
        sum += Number($(this).val());
    });
    $('#sumWeight').val(sum);
    $(".wt").each(function(){
        var numopts = 1 + (60 - sum + Number($(this).val())) / 5;
        if ($(this).get(0).options.length > numopts) {
            for (var i = $(this).get(0).options.length - 1; i >= numopts; i--) {
                $(this).get(0).remove(i);
            }
        } else {
            for (var i = $(this).get(0).options.length; i < numopts; i++) {
                $(this).get(0).options.add(new Option(i * 5, i * 5)); // "maximum selection reached"
            }
        }
    });
}