JSFiddle - React, Tailwind, and code Playground

HTML

<table id="math-table">
      <tbody>
        <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>
</tbody>
    </table>
<div id="button">add row +</div>

CSS

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

JavaScript

$(document).ready(function() {

    $("#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');

    });

    $("#button").click(function() {
        addRow();
    });

    //cache the first row that needs to be cloned.
    var rowTmpl = '<tr>' + '<td><input type="text" id="A{ID}" name="A" value=""></td>' + '<td><input type="text" id="B{ID}" name="B" value=""></td>' + '<td><input type="text" id="C{ID}" name="C" readonly="readonly" tabIndex="-1" value=""></td>' + '</tr>';

    function addRow() {
        var rowCount = $('#math-table tbody tr').length;

        //modify template
        var addRow = rowTmpl.replace(/{ID}/g, (rowCount + 1));

        $('#math-table tbody').append(addRow);
    }

    for (var i = 0; i < 24; i++ ) {
        addRow();
    }
});