JSFiddle - React, Tailwind, and code Playground

HTML

<form id="calc" name="calc">
    <input id="shirts" name="shirts" type="text" />
    <label for="shirts">Number of Shirts</label>
    <input id="colorsOnFront" name="colorsOnFront" type="text" />
    <label for="colorsOnFront">Number of Colors on Front</label>
    <input id="colorsOnBack" name="colorsOnBack" type="text" />
    <label for="colorsOnBack">Number of Colors on Back</label>
    <input name="calculateTotal" id="calculateTotal" type="button" value="Calculate Total" />
    <div id="result" style="clear:both;"> <strong>Total:</strong>  <span id="total"></span>  <strong>Per Shirt:</strong>  <span id="perShirt"></span>

    </div>
</form>

CSS

label {
    float:left;
    width:200px;
}
input {
    display:block;
    float:right;
    clear:right;
}

JavaScript

$(document).ready(function () {
    $('#calculateTotal').click(function () {
        //individual shirt price before reduction
        var ShirtPriceIndiv = 50;
        //number of shirts selected by user
        var numShirts = parseInt($('#shirts').val());
        //get shirt price based on number of shirts 
        var shirtPrice = getshirtPrice(numShirts);
        //per color price
        var perColorPrice = 5.99;
        //num front colors
        var frontColors = ($('#colorsOnFront').val()) ? parseInt($('#colorsOnFront').val()) : 0;
        //num back colors
        var backColors = ($('#colorsOnBack').val()) ? parseInt($('#colorsOnBack').val()) : 0;

        console.log(shirtPrice);
        var totalCost = shirtPrice + (perColorPrice * frontColors) + (perColorPrice * backColors);

        //grand total
        $('#total').html('&pound;' + totalCost.toFixed(2));

        var perShirtCost = ShirtPriceIndiv + (perColorPrice * frontColors) + (perColorPrice * backColors);
        //per shirt
        $('#perShirt').html('&pound;' + perShirtCost.toFixed(2));

    });

    function getmixPrice(el) {
        numS = parseInt(el);        
        //calculate mix price
        shPrice = 50*numS;        
        //get percentage value based on number of mixes e.g. if 2 mixes, take off 1%
        percentVal = (el!==1) ? ((numS-1)/100)*shPrice : 1                      
        //get mix price minus the percentage
        mixPrice = (el!==1) ? (50*el) - percentVal : 50   
        console.log(mixPrice);
        return mixPrice;
    }
});