JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="jholder"></div>
    <div id="wholder"></div>
</div>
<div id="bar">
    <p width="300px">Click on the buttons below to see how orangey each mixture is.</p>
    <div id="water">
        <h1>Water</h1>
        <h2 id="wcount"></h2>
    </div>
    <div id="Minus1" class="s">
        <h3>Remove </h3>
    </div>
    <div id="juice">
        <h1>Juice</h1>
        <h2 id="jcount"></h2>
    </div>
    <div id="Minus2" class="s">
        <h3>Remove </h3>
    </div>
</div>

CSS

#container {
    width: 300px;
    height: 300px;
    background-color: rgba(255, 140, 0, 1);
}
#water {
    width: 300px;
    height: 75px;
    background-color: #eee;
    text-align: center;
}
#juice {
    width: 300px;
    height: 75px;
    background-color: #FF8c00;
    text-align: center;
}
div h1 {
    float: left;
    margin-left: 40px;
    position: relative;
    text-align:center;
}
.s {
    margin:5px 0;
    width: 300px;
    padding-left:40px;
}
#Minus1 {
    Background-color: #eee;
    padding:10px 0 0 0;
}
div h3 {
    margin: 0 0 0 40px;
}
#Minus2 {
    background-color: #FF8c00;
    padding:10px 0 0 0;
}
div h2 {
    float: right;
    margin: 20px;
    position: relative;
    line-height: 150%
}
#wbox {
    width: 22px;
    height: 22px;
    font-size: 9px;
    background-color: #fff;
    float: left;
    position: relative;
    opacity: 1 !important;
    line-height: 8px;
    padding: 0px 0 5px 0;
    text-align: center;
}
#jbox {
    width: 22px;
    height: 22px;
    font-size: 9px;
    background-color: #FF8C00;
    float: left;
    position: relative;
    opacity: 1 !important;
    line-height: 8px;
    padding: 0px 0 5px 0;
    text-align: center;
}
#wholder {
    float: left;
    width: 100%;
}
#jholder {
    float: left;
    width: 100%;
}

JavaScript

var opacity = 0;
var juices = 0;
var waters = 0;
$(document).ready(function () {
    $('#juice').click(function () {
        var newjuice = juices + 1;
        juices = newjuice;
        var div = waters + juices
        opacity = juices / div;
        $('#container').css("background-color", "rgba(255, 140, 0," + opacity + ")");
        $('#jcount').text(juices);
        $('#jholder').append("<div id='jbox'><p>" + juices + "</p></div>");

    });
});

$(document).ready(function () {
    $('#water').click(function () {
        var newwater = waters + 1;
        waters = newwater;
        var div = waters + juices
        opacity = juices / div;
        $('#container').css("background-color", "rgba(255, 140, 0," + opacity + ")");
        $('#wcount').text(waters);
        $('#wholder').append("<div id='wbox'><p>" + waters + "</p></div>")

    });
});
$(document).ready(function () {
    $('#Minus1').click(function () {
        var newwater = waters - 1;
        waters = newwater;
        var div = waters + juices
        opacity = juices / div;
        $('#container').css("background-color", "rgba(255, 140, 0," + opacity + ")");
        $('#wcount').text(waters);
        $('div#wbox:last').remove();

    });
});
$(document).ready(function () {
    $('#Minus2').click(function () {
        var newjuice = juices - 1;
        juices = newjuice;
        var div = waters + juices
        opacity = juices / div;
        $('#container').css("background-color", "rgba(255, 140, 0," + opacity + ")");
        $('#jcount').text(juices);
        $('div#jbox:last').remove();

    });
});