JSFiddle - React, Tailwind, and code Playground

HTML

<div class=form>
    <table>
        <tr>
            <td>Gender:</td>
            <td>
                <form>
                    <input type="text" name="genderItem" />
                </form>
            </td>
            <td>
                <div class="button" id="button1">Add!</div>
            </td>
        </tr>
        <tr>
            <td>Number of charcters:</td>
            <td>
                <form>
                    <input type="text" name="charcItem" />
                </form>
            </td>
            <td>
                <div class="button" id="button2">Add!</div>
            </td>
        </tr>
    </table>

JavaScript

var names = new Array();
$('#button2').click(function () {
    names = $('input[name=charcItem]').val();
    removeRows();
    nameRecording(names, $(this));

});

function removeRows() {

    $('#newRows').remove();
    //alert(nearTr);
    //nearTr.remove();

}

function nameRecording(names, $this) {
    var addRows = '<tr id=newRows>';
    for (var i = 1; i <= names; i++) {
        var nearTr = $this.closest('tr');
        addRows = addRows + '<td>Name one:</td><td><form><input type="text" name="charcItem" class = "newR"/></form></td>';
    }
    addRows = addRows + '<td><div class="button" id="nameButton"> Add! </div></td></tr>';
    nearTr.after(addRows);
};
$(".form").on('click', '#nameButton', function () {
    names = $(".newR").map(function () {
        return $(this).val();
    }).get();
    prompt(names);
});