JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <script language="javascript" type="text/javascript">
            //my previous understanding of the question
            //function AddNewRow()
            //{
            //    var row = $(document.createElement("tr"));
            //    row.append("<td>some value</td>");
            //    row.append("<td>another val</td>");
            //    $("#mytable").children().append(row);              
            //}
            
            //my corrected understanding: you don't know how
            //to decide how to create a new row to put in the
            //table. note i added a table body explicitly, it
            //is added by default automatically if you don't.
            function AddNewData()
            {
                var row = $("#tablebody").children().last();
                if(row.children().length >= 4)
                {
                    console.log("creating a new row...");
                    //create a new row if we need one
                    row = $(document.createElement("tr")); 
                    $("#tablebody").append(row);           
                }
                else console.log("using existing row...");
                
                //add new datum to row
                row.append("<td>some value</td>");
            }
        </script>
    </head>
    <body>
        <p>
            <table id="mytable">
                <tbody id="tablebody">
                <tr>
                    <td>one</td>
                    <td>two</td>
                </tr>
                <tr>
                    <td>three</td>
                    <td>four</td>
                </tr>
            </tbody>
            </table>
        </p>
        <a href="#" onclick="AddNewData()">Add new row</a>
    </body>
</html>