JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<form name="myForm" onsubmit="return validateForm()">
	<table>
		<tr>
			<td>Last Name:</td>
			<td><input type="text" id="lastname" /></td>
		</tr>
		<tr>
			<td>First Name:</td>
			<td><input type="text" id="firstname" /></td>
		</tr>
		<tr>
			<td>Hobbies (separate each hobby with a comma):</td>
			<td><input type="text" id="hobbies" /></td>
		</tr>
		<tr>
			<td style="vertical-align: top;">Pets:</td>
			<td id="petCell"><input type="text" id="hobbies" /><input type="button" id="addPet" value="Add Pet" /><br /></td>
		</tr>
		<tr>
			<td>Address:</td>
			<td><input type="text" id="address" /></td>
		</tr>
		<tr>
			<td>Phone Number:</td>
			<td><input type="text" id="phone" /></td>
		</tr>
		<tr>
			<td>Age:</td>
			<td><input type="text" id="age" /></td>
		</tr>
		<tr>
            <td colspan="2"><input type="submit" value="Submit" /></td>
		</tr>
	</table>
</form>

JavaScript

document.getElementById("addPet").onclick = function() {
    var petCell = document.getElementById("petCell");
    var input = document.createElement("input");
    input.type = "text";
    var br = document.createElement("br");
    petCell.appendChild(input);
    petCell.appendChild(br);
}