JSFiddle - React, Tailwind, and code Playground

HTML

<div>
			<ul>
				<li><input type="button" value="Add Entry" class="addEntry" /></li>
			</ul>
			<table id="momTable" border="1" cellpadding="2">
				<tr>
					<td style="width:20px;">Edit</th>
					<th>SlNo</th>
					<th>Activity</th>
					<th>Owner</th>
					<th>Project Name</th>
					<th>Region</th>
					<th>Start Date</th>
					<th>Target Date</th>
					<th>Closure Date</th>
					<th>Status</th>
					<th>Previous Reference(if any)</th>
				</tr>
				<tr>
					<td style="width:20px;"><input type="radio" class="editRowInput" name="editRow" /></td>
					<td>1</td>
					<td><input type="text" class="activityInput" name="activity" value="Some value" readonly /></td>
					<td>
						<input type="text" class="ownerInput" name="activity" value="Users" readonly />
					</td>
					<td>
						<input type="text" class="projectNameInput" name="projectName" value="SomeProject" readonly />	
					</td>
					<td>
						<input type="text" class="regionInput" name="region" value="India" readonly />	
					</td>
					<td>
						<input type="text" class="startDateInput" name="startDate" value="5/10/2014" readonly />	
					</td>
					<td>
						<input type="text" class="targetDateInput" name="targetDate" value="5/14/2014" readonly />	
					</td>
					<td>
						<input type="text" class="closureDateInput" name="closureDate" value="5/21/2014" readonly />	
					</td>
					<td>
						<span class="show">Open</span>
						<select class="hide" name="status" class="statusInput">
							<option value="Open">Open</option>
							<option value="In Progress">In Progress</option>
							<option value="Closed">Closed</option>
						</select>
					</td>
					<td>
						<textarea rows="5" cols="26" class="commentsInput" name="comments" readonly text-align="top">
							Testing
						</textarea>
						
					</td>
				</tr>
			</table>
		</div>

CSS

ul,li{padding:0; margin:0;}
ul{width:100%; overflow:hidden;}
li{float:left;}
.newRow{display:none;}

#momTable th{ font-size:12px;}
#momTable{font-size:11px;color:#000;}
#momTable td,#momTable input,#momTable select{text-align:center;}
#momTable input,#momTable select{ font-size:11px;background-color:#f1f1f1;border:0;}
#momTable textarea {background-color:#f1f1f1;border: 0;resize: none;vertical-align: top;}
#momTable .show{display:block;}
#momTable .hide{display:none;}
#momTable textarea.active,#momTable input.active,#momTable select.active{background-color:#fff;border: 1px solid #999;}
#momTable .newRow{display:block;}

JavaScript

$(".addEntry").on("click",function()
				{
						$("#momTable").append('<tr class="newRow"><td style="width:20px;"><input type="radio" class="editRowInput" name="editRow"></td>	<td>2</td><td><input type="text" class="activityInput active" name="activity" value=""></td><td><input type="text" class="ownerInput active" name="activity" value=""></td><td><input type="text" class="projectNameInput active" name="projectName" value=""></td><td><input type="text" class="regionInput active" name="region" value=""></td><td><input type="text" class="startDateInput active" name="startDate" value=""></td><td><input type="text" class="targetDateInput active" name="targetDate" value=""></td><td><input type="text" class="closureDateInput active" name="closureDate" value=""></td><td><span class="hide">Open</span>	<select name="status" class="showstatusInput"><option value="Open">Open</option><option value="In Progress">In Progress</option><option value="Closed">Closed</option></select></td><td><textarea rows="5" cols="26" class="commentsInput" name="comments" text-align="top"></textarea></td></tr>');
						console.log(newRow);
				});