JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="Add Row" onclick="addRow()" class="data-button" id="add-row" />
<br />
<div id="data-table">
    <div class="data-row">
        <input class="data-cell data-category" value="aaa" />
        <input class="data-cell data-value" value="4000" type="number" step="10" />
        <input class="data-button delete-button" type="button" value="X" />
    </div>
    <div class="data-row">
        <input class="data-cell data-category" value="frc" />
        <input class="data-cell data-value" value="1882" type="number" step="10" />
        <input class="data-button delete-button" type="button" value="X" />
    </div>


</div>
<br />

CSS

.errmsg   { float:left; color:red; font:normal 12px arial;}
.data-row { float:left; clear:left;}
.err { border:1px solid red;}

JavaScript

jQuery(function () {
        // initialize the table
   
        initRowEvents(jQuery(document));
    });

    function initRowEvents(scope) {
         $('input').attr('readonly','readonly');
        scope.find('.data-cell').attr('title', 'Click to edit').on('keypress keyup change', function () {

        }).end().find('.delete-button').click(function () {
            // remove the row
            $(this).parents('.data-row').remove();

        });
    }

    function addRow() {
        if($('.addnew-button').length ==0){
        jQuery('<div class="data-row"><input class="data-cell data-category" /><input class="data-cell data-value" type="number" step="10" /><input class="data-button delete-button" type="button" value="X" /><input class="data-button addnew-button" type="button" value="V" /></div>').prependTo('#data-table');
        $('.addnew-button').click(function(){
            $(".errmsg").remove();
            $(".err").removeClass('err');            
            
            var _row = $(this).parent();
            var _inputs = _row.children('.data-cell');
            var _valid = [];
            for (var i =0; i<_inputs.length; i++) {
                if (_inputs.eq(i).val().trim().length<1) {
                    _valid.push(_inputs.eq(i));
                    _inputs.eq(i).addClass('err');
                }
            }
            if (_valid.length<1) {
                // is valid
                $(this).remove();
                initRowEvents(jQuery(document));
            } else {
                // not valid
                var _err = $("<div class='errmsg'>field empty</div>");
                _row.after(_err);
            }         
        });
        }
    }