In the below dynamic form rows can be added or removed dynamically. Calculation involves finding the difference between cost price and the selling price of a product.

What I like to implement (and trying in vain for the last one week or so) is to set the background color of the result cell to red if the value is negative and to green if the value is positive. Though I came across several solutions on this site unfortunately I was unable to implement them to solve this.

```
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS</title>
    </head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if (rowCount < 5) { // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        //var row = table.insertRow(rowCount-1);
        var colCount = table.rows[0].cells.length;
        row.id = 'row_'+rowCount;
        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.outerHTML = table.rows[0].cells[i].outerHTML;            
        }
       var listitems= row.getElementsByTagName("input")
            for (i=0; i<listitems.length; i++) {
              listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
            }
    } else {
        alert("Maximum 5 Rows Only.");

    }
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for (var i = 0; i < rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if (null !== chkbox && true === chkbox.checked) {
            if (rowCount <= 1) { // limit the user from removing all the fields
                alert("Cannot Remove all the Records.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

    </script>
    <script>
    function calculate(elementID) {
        var mainRow = document.getElementById(elementID);
        var num1 = mainRow.querySelectorAll('[name=num1]')[0].value;
        var num2 = mainRow.querySelectorAll('[name=num2]')[0].value;
        var result = mainRow.querySelectorAll('[name=result]')[0];
        var result1 = num2 - num1;
        result.value = result1;
    }
    </script>
    <body>
    <input type="button" value="Add" onClick="addRow('dataTable')" />
    <input type="button" value="Remove" onClick="deleteRow('dataTable')" />
    <table id="dataTable" class="form" border="1">
        <tbody>
            <tr id='row_0'>

                    <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>

                    <td>
                        <label>Cost Price</label>
                        <input type="text" size="1" required="required" name="num1" class="num1" id="num1" oninput="calculate('row_0')"/>
                    </td>
                    <td>
                        <label>Selling Price</label>
                        <input type="text" size="1" required="required" name="num2" class="num2" id="num2" oninput="calculate('row_0')"/>
                    </td>
                    <td>
                        <label>Difference</label>
                        <input type="text" size="1" required="required" name="result" class="result" id="result" />
                    </td>

            </tr>
            </tbody>
            </table>
    </body>
    </html>

```