JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

<button onclick="addInput()">Add Input</button>
<button onclick="showData()">Show Data</button>

JavaScript

let data = {
	nameGenerator: 0
};

function addInput() {
	// generate a new name and property in data object
  let propertyName = String.fromCharCode("a".charCodeAt() + data.nameGenerator++);
  // initialize property value to its name
  data[propertyName] = propertyName;

	// add <div><input value="(property)"></div> to container
	let containerElement = document.getElementById("container");
  let lineElement = document.createElement("div");
  let inputElement = document.createElement("input");
  lineElement.appendChild(inputElement);
  containerElement.appendChild(lineElement);

	// initialize input value (note: this does not bind the two, just initializes)
  inputElement.value = data[propertyName];

  // create a closure that binds the property to the element
  inputElement.addEventListener("keyup", function () {
  	// inside this function, propertyName and inputElement 
    // are "captured" in the closure
  	data[propertyName] = inputElement.value;
  })
}

function showData() {
  let keys = Object.keys(data);
	let a = [];
	for (let i = 0; i < keys.length; ++i) {
  	a.push(keys[i] + " = '" + data[keys[i]] + "'");
  }
  alert(a.join("\r\n"));
}