JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div>
    <div id="ranking">
        <table id=OR>
            <tr class="header">
                <td colspan="2">OR Rank</td>
                <td id="score"><input id="orSum" type="text" value=0 disabled/></td>
            </tr>
            <tr id="ecoSum" class="header2">
                <td width="650px">Ecosystem Fit:</td>
                <td width="75px">Points</td>
                <td id="score" width="75px"><input id="ecoSum" type="text" class="black" value=0 disabled/></td>
            </tr>
            <tr class="header3">
                <td id="padding">Competition gap</td>
                <td><input type="text" value=5 disabled/></td>
                <td id="middle">
                    <label>
                        <input id="ecoSum" type="checkbox">
                        <span class="y">X</span>
                        <span class="n"></span>
                    </label></td>
            </tr>
            <tr class="header3">
                <td id="padding">Extend product life</td>
                <td><input type="text" value=5 disabled/></td>
                <td id="middle"><label>
                        <input id="ecoSum" type="checkbox">
                        <span class="y">X</span>
                        <span class="n"></span>
                    </label></td>
                </td>
            </tr>
            <tr class="header3">
                <td id="padding">HW Obsolescence</td>
                <td><input type="text" value=5 disabled/></td>
                <td id="middle"><label>
                        <input id="ecoSum" type="checkbox">
                        <span class="y">X</span>
                        <span class="n"></span>
                    </label></td>
                </td>
            </tr>
            <tr class="header3">
                <td id="padding">Interco with other apps/componensts High</td>
                <td><input type="text" value=5 disabled/></td>
                <td id="middle"><label>
          ...

CSS

#ranking, #edit, #save, #cancel {
        display: inline-block;
    }

    table#OR {
        font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
        font-size: 16px;
        border: 1px solid black;
    }

    tr.header {
        background-color: #F4B084;
    }

    tr.header2 {
        background-color: #F8CBAD;
        border-top: 3px solid black;
    }

    tr.header3 {
        background-color: #FCE4D6;
    }

    #padding {
        padding-left: 20px;
    }

    input[type="text"] {
        background: transparent;
        border: none;
        text-align: center;
        width: 35px;
    }

    td#middle span {
        /*text-align:center;*/
        padding-left: 14px;
    }

    td#score {
        text-align: center;
    }

    input {
        color: #00C677;
    }

    input.black {
        color: #000000;
    }

    label input {
        opacity: 0;
        width: 0;
        height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;

    }

    label span.y {
        color: green;
        display: none;
    }

    label span.n {
        display: inline;
    }

    label input:checked ~ span.y {
        display: inline;
    }

    label input:checked ~ span.n {
        display: none;
    }

JavaScript

jQuery(function () {
        var stateOfCheckboxes;
        var orRankVal = 0;
        var fitVal = 0;
        var compVal = 0;
        var payback = 0;
        var relevance = 0;
        
        var orRankElem = jQuery("#orSum");

        jQuery(":checkbox").attr("disabled", true);

        jQuery(":checkbox").on("click", function () {

            var val = jQuery(this).parent().parent().siblings().eq(1)
                .children().eq(0).val();

            var id = jQuery(this).attr('id');
            var midsumElem = jQuery('input#'+ id +'[type="text"]');
            var midsumVal = midsumElem.val();
            var orSum = orRankElem.val();
            var midsum = 0;

            if (this.checked) {
                midsum = parseInt(midsumVal) + parseInt(val);
                orSum = parseInt(orSum) + parseInt(val);
            } else {
                midsum = parseInt(midsumVal) - parseInt(val);
                orSum = parseInt(orSum) - parseInt(val);
            }
            midsumElem.val(midsum);
            orRankElem.val(orSum);

        });

        jQuery("#edit").on("click", function () {
        		stateOfCheckboxes = rememberState();
            edit();
        });

        jQuery("#save").on("click", function () {
            save();
            stateOfCheckboxes = rememberState();
            
            orRankVal = parseInt(orRankElem.val());
        		fitVal = parseInt(jQuery('input#ecoSum[type="text"]').val());
        		compVal = parseInt(jQuery('input#compSum[type="text"]').val());
        		payback = parseInt(jQuery('input#paybackSum[type="text"]').val());
        		relevance = parseInt(jQuery('input#stratSum[type="text"]').val());
                      
        });

        jQuery("#cancel").on("click", function () {
            cancel(stateOfCheckboxes);
            orRankElem.val(orRankVal);
        		jQuery('input#ecoSum[type="text"]').val(fitVal);
        		jQuery('input#compSum[type="text"]').val(compVal);
       ...