JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span class="first">&nbsp;</span>
    <span class="sprite" style="background-position: 0px   0px"></span>
    <span class="sprite" style="background-position: 0px -16px"></span>
    <span class="sprite" style="background-position: 0px -32px"></span>
    <span class="sprite" style="background-position: 0px -48px"></span>
    <span class="sprite" style="background-position: 0px -64px"></span>
</div>

<div>
    <span class="first">Remove</span>
    <span><input id="dH" type="checkbox" onclick="calc()"></input></span>
    <span><input id="dC" type="checkbox" onclick="calc()"></input></span>
    <span><input id="dL" type="checkbox" onclick="calc()"></input></span>
    <span><input id="dB" type="checkbox" onclick="calc()"></input></span>
    <span><input id="dW" type="checkbox" onclick="calc()"></input></span>
</div>
<div>
    <span class="first">Replace</span>
    <span><input id="rH" type="checkbox" onclick="calc()"></input></span>
    <span><input id="rC" type="checkbox" onclick="calc()"></input></span>
    <span><input id="rL" type="checkbox" onclick="calc()"></input></span>
    <span><input id="rB" type="checkbox" onclick="calc()"></input></span>
    <span><input id="rW" type="checkbox" onclick="calc()"></input></span>
</div>
<div>
    <span class="first">Place</span>
    <span><input id="pH" type="checkbox" onclick="calc()"></input></span>
    <span><input id="pC" type="checkbox" onclick="calc()"></input></span>
    <span><input id="pL" type="checkbox" onclick="calc()"></input></span>
    <span><input id="pB" type="checkbox" onclick="calc()"></input></span>
    <span><input id="pW" type="checkbox" onclick="calc()"></input></span>
</div>
<input id="output" type="text" readonly>

CSS

span.first {
    margin-right:48px;
}

span { 
    float:left;
    display:block;
    width: 16px;
}

div, input[type="text"] {
    float:left;
    clear:left;
}

.sprite {
    display: inline-block;
    vertical-align: text-top;
    height: 16px;
    width: 16px;
    background-repeat: no-repeat;
    background-image: url(http://i.imgur.com/yAq0qlP.png);
}

JavaScript

function calc() {
    var dH = $("#dH").is(":checked") ? 1 << (4) : 0;
    var dC = $("#dC").is(":checked") ? 1 << (3) : 0;
    var dL = $("#dL").is(":checked") ? 1 << (2) : 0;
    var dB = $("#dB").is(":checked") ? 1 << (1) : 0;
    var dW = $("#dW").is(":checked") ? 1 << (0) : 0;
    var dR = dH + dC + dL + dB + dW;

    var rH = $("#rH").is(":checked") ? 1 << (4 + 8) : 0;
    var rC = $("#rC").is(":checked") ? 1 << (3 + 8) : 0;
    var rL = $("#rL").is(":checked") ? 1 << (2 + 8) : 0;
    var rB = $("#rB").is(":checked") ? 1 << (1 + 8) : 0;
    var rW = $("#rW").is(":checked") ? 1 << (0 + 8) : 0;
    var rR = rH + rC + rL + rB + rW;

    var pH = $("#pH").is(":checked") ? 1 << (4 + 16) : 0;
    var pC = $("#pC").is(":checked") ? 1 << (3 + 16) : 0;
    var pL = $("#pL").is(":checked") ? 1 << (2 + 16) : 0;
    var pB = $("#pB").is(":checked") ? 1 << (1 + 16) : 0;
    var pW = $("#pW").is(":checked") ? 1 << (0 + 16) : 0;
    var pR = pH + pC + pL + pB + pW;

    var result = dR + rR + pR;
    $("#output").val(result);
}