JSFiddle - React, Tailwind, and code Playground

by mobala

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);
};    
$('#nameButton').click(function(){
    names=$(".newR").map(function(){
        return $(this).val();
    });
    prompt(names);
});