Sed hic dolor voluptas enim

Placeat quae nemo consequuntur dolores nihil sunt dolor

HTML

<div id="format">
         <form id="myForm" onsubmit="myForm(event)">
         <b>Name:</b>
         <input type="text" name="name" id="name"  required="required" >
        
        <button type="submit" name="submit" id="submit" value="Submit" onsubmit="myData()" >Submit</button>

    </form>
        <div id="sample"></div>
</div>

React

var data = [];
var i, item;

function myForm(event){
    event.preventDefault();
    var name = document.getElementById("name").value;
   
    var userObject = {
        name: name
        };
       data.push(userObject);

        document.getElementById("sample").innerHTML = ""; //Prevents duplicate
        for (var i=0 ; i <data.length ; i++){
            var theDiv ;
            var container ;
            var button;
            var index;

            theDiv = document.createElement( "div" );
            button = document.createElement( "button");
            index = document.createElement("input");
            index.setAttribute('hidden', 'true');
            button.setAttribute("id", "remove");
            button.setAttribute("onclick", "removeItem(this)");            

            for (item in data[i]) {
            	var x = item + ":" + data[i][item] + "</br>" ;              
                theDiv.innerHTML += item + ":" + data[i][item] + "</br>" ;
                index.value += i; 

            }
            button.innerHTML += "Remove";   
           
            container = document.getElementById( "sample" );
            container.appendChild( theDiv );
            theDiv.appendChild (button);
            theDiv.appendChild(index);
        }
    console.log(data);
}
function removeItem(event){
	let el = event;
    let index = el.parentNode.lastElementChild.value;
    el.parentElement.remove();
    data.splice(index,1);
}