JSFiddle - React, Tailwind, and code Playground

HTML

<table id="math-table">
        <tr>
               <td><input type="text" id="A1" name="A" value=""></td>
               <td><input type="text" id="B1" name="B" value=""></td>
               <td><input type="text" id="C1" name="C" readonly="readonly" tabIndex="-1" value=""></td>
          </tr>
    </table>
<div id="button">add row +</div>

CSS

.red
{
    background-color:red;
}
.green
{
    background-color:green;
}
.blue
{
    background-color:blue;
}

JavaScript

$("#math-table input").live("keyup", function() {
    var id = this.id.match(/\d+/);
    var percent = Math.round(($("#A" + id).val() / $("#B" + id).val()) * 100);
    $("#C" + id).val(percent + "%");

    $('#A' + id).attr('value', $('#A' + id).val());
    $('#B' + id).attr('value', $('#B' + id).val());
    $('#C' + id).attr('value', $('#C' + id).val());
    if (percent > 0 && percent < 34) $('#C' + id).removeClass().addClass('red');
    if (percent > 33 && percent < 67) $('#C' + id).removeClass().addClass('green');
    if (percent > 67) $('#C' + id).removeClass().addClass('blue');

});

var uniqueIds = $("#math-table tr").length;
$("#button").click(function() {
    var $thisRow = $("#math-table tr:last-child"),
        $clone = $thisRow.removeClass().clone(),
        // Clone row
        $inputs = $clone.find("input").val("").removeClass(); // Reset values, return all inputs
    uniqueIds++; //Increment ID
    $inputs[0].id = "A" + uniqueIds;
    $inputs[1].id = "B" + uniqueIds;
    $inputs[2].id = "C" + uniqueIds;


    //$inputs.eq(0).focus();                     
    $thisRow.after($clone);
});