JSFiddle - React, Tailwind, and code Playground

HTML

<div id="selection">
    <div class="choice selected" data-value="2">
        <canvas id="half" width="60" height="60"></canvas>
        Half
    </div>
    <div class="choice" data-value="3">
        <canvas id="third" width="60" height="60"></canvas>
        Third
    </div>
    <div class="choice" data-value="4">
        <canvas id="quarter" width="60" height="60"></canvas>
        Quarter
    </div>
    <div class="choice" data-value="8">
        <canvas id="eighth" width="60" height="60"></canvas>
        Eighth
    </div>
</div>
<textarea placeholder="Insert ingredients here"></textarea><div id="output">Your output will be posted here</div>

CSS

body * {
    font-family: 'Helvetica';
}
textarea, #output {
    width: 400px;
    height: 250px;
    display: inline-block;
    border: 1px solid #000;
    padding: 4px;
    float: left;
    font-size: 16px;
    outline: none;
    overflow: scroll;
    white-space: nowrap;
}
#output {
    margin-left: 30px;
}
#selection {
    margin-bottom: 30px;
}
.choice canvas {
    width: 60px;
    height: 60px;
    display: block;
    padding-bottom: 4px;
    margin: 0 auto;
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.selected {
    background-color: #CCC;
}
.choice {
    text-align: center;
    padding: 10px;
    width: 70px;
    display: inline-block;
    border: 1px solid #000;
    cursor: default;
}

JavaScript

var content = [];

$(".choice").on("click", function() {
    $(".selected").removeClass("selected");
    $(this).addClass("selected");
});

$("textarea").on("keyup", function(e) {
    update();
});

$(".choice").on("click", function() {
    update();
});

Math.gcd = function(a, b) {
    if (b) {
        return Math.gcd(b, a % b);
    }
    return Math.abs(a);
}
Math.fraction = function(n, prec, up) {
    var s = String(n)
    var	p = s.indexOf('.');
    if (p == -1) {
        return s;
    }
    var i = Math.floor(n) || '';
    var	dec = s.substring(p);
    var m = prec || Math.pow(10, dec.length - 1);
    var num = up === 1 ? Math.ceil(dec * m) : Math.round(dec * m);
    var den = m;
    var g = Math.gcd(num, den);
    if (den / g == 1) {
        return String(i + (num / g));
    }
    if (i) {
        i = i + ' ';
    }
    return i + String(num / g) + '/' + String(den / g);
}

function update() {
    var selection = $(".selected").attr("data-value");
    var converted = $("textarea").val();
    var regex = /(\d+[\/\d.]*|\d)/g;

    content = converted.split("\n");

    for(i = 0; i < content.length; i++) {
        //Finds numbers on the line
        var number = content[i].match(regex);
        //number == null if the line is empty
        if(number != null) {
            //There can be more than 1 number on each line, create a new loop
            for(j = 0; j < number.length; j++) {
                //Turns fractions into decimals
                var evalNumber = eval(number[j]);
                
                //Divides the number
                var divided = parseFloat(evalNumber / selection);
                
                //We need some kind of precision, so we won't get 0.1666667 and so on
                var precision = selection;
                if(precision == 2) {
                    precision = 0;
                }
                
                //Turns our decimal into a fraction (or a whole-number)
                var newNum =...