JSFiddle - React, Tailwind, and code Playground

by Lan Jiang

HTML

<div id="contenu"></div>

JavaScript

// create the button
var contenu = document.getElementById("contenu");
var btn = document.createElement("button");
btn.textContent = "add";
contenu.appendChild(btn);

// click the button to create 2 inputs and submit
btn.addEventListener("click", function(){
	// create 2 inputs and submit
    var name = document.createElement("input");
    name.placeholder = "enter a name";
    var age = document.createElement("input");
    age.placeholder = "enter the age";
    var submit = document.createElement("input");
    submit.type = "submit";
    submit.value = "submit";
    var form = document.createElement("form");
    form.method = "post";
    form.appendChild(name);
    form.appendChild(age);
    form.appendChild(submit);
    contenu.appendChild(form);
    
    // create a new empty table
    var newTable = [];
    var newObject = {};
    newTable.push(newObject);
    
    // submit the form to show the input value in html
    form.addEventListener("submit", function(e){
    	newObject.name = name.value;//"Tom" will work
    	newObject.age = age.value;//20 will work
    	newTable.forEach(function(table){
        	e.preventDefault();
        	var pElt = document.createElement("p");
            pElt.innerHTML = table.name + " " + table.age;  
            contenu.appendChild(pElt);
        });   
    });
});